media uploader wordpress

Media uploader na stronie admin w wordpress

Zakładamy oczywiście, że strona z ustawieniami jest już utworzona, jeśli nie sprawdź jeden z poprzednich wpisów.
Na początek musimy dodać plik js, ponieważ potrzebujemy użyć biblioteki jquery. Dodamy plik wewnątrz folderu inc o nazwie pikademia-admin.js
Następnie stworzymy połączenie z nim i dodamy ważną funkcję, która pobierze potrzebne pliki, aby stworzyć później media uploader
Poniższy kod można dodać w pliku functions.php

function pikademia_load_admin_scripts($hook){
    // nazwa strony to zazwyczaj toplevel_page_ + id strony
    // nazwę można zobaczyć w sekcji body wyświetlając zmienną $hook
    //echo $hook;
    if('toplevel_page_pikademia_motyw' != $hook){
        return;
    }
    wp_register_style('pikademia_admin_style', get_template_directory_uri().'/inc/pikademia-admin.css', array(), '1.0.0', 'all');
    wp_enqueue_style('pikademia_admin_style');
    
    wp_enqueue_media(); // add options for media uploader
    wp_register_script('pikademia_admin_script',get_template_directory_uri().'/inc/pikademia-admin.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script('pikademia_admin_script');
}
add_action('admin_enqueue_scripts', 'pikademia_load_admin_scripts');

Następnie należy zarejestrować ustawienie w funkcji register_setting() i add_settings_field() i dodać callback function

function pikademia_custom_settings(){

    register_setting(
        'pikademia-settings-group', // nazwa grupy opcji, do której się donosimy w funkcji settings_fields()
        'profile_pic'                // id opcji !!!!
    );
    add_settings_section(
        'pikademia-myoptions',  // id slug do identyfikacji sekcji w metodzie add_settings_field() !!!!
        'Opcje sekcji 1',       // wyświetlany tytuł, może być pusty
        'pikademia_options',    // callback function do utworzenia !!!
        'pikademia_motyw'       // id strony na której dodajemy sekcję(pobieramy z funkcji pikademia_add_admin_page)!!!
    );

    add_settings_field(
        'profile-pic-nazwa',   // id
        'Zdjęcie',              // wyświetlany tytuł pola !!
        'pikademia_settings_picture_field', //function callback do utworzenia !!!
        'pikademia_motyw', //id strony !!!
        'pikademia-myoptions' //section id z metody add_settings_section !!!
    );

}
add_action('admin_init', 'pikademia_custom_settings');

function pikademia_options(){
    // echo "Sekcja z ustawieniami";
}

function pikademia_settings_picture_field(){
    $picture = esc_attr(get_option('profile_pic'));
    echo '<input type="button" class="button button-secondary" value="Upload Prifle Picture" id="upload-button"/>';
    echo '<input type="hidden" id="profile-picture" name="profile_pic" value="'.$picture.'"/>';
}

Plik pikademia-admin.js

jQuery(document).ready(function($){
    var mediaUploader;
    $('#upload-button').on('click',function(e){
        e.preventDefault();
        if(mediaUploader){
            mediaUploader.open();
            return;
        }
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose picture',
            button: {text:'Choose pic'},
            multiple:false
        });
        mediaUploader.on('select', function(){
            attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#profile-picture').val(attachment.url);
            //$('#profile-picture-preview').css('background-image','url(' + attachment.url + ')');
        });
        mediaUploader.open();
    });
});

W szablonie strony lub w funkcji tworzącej strone dodajemy

    $picture = esc_attr(get_option('profile_pic'));
    echo '<h1>Ustawienia motywu Pikademia</h1>';
    settings_errors();
    echo '<form method="post" action="options.php">';
    settings_fields('pikademia-settings-group');
    do_settings_sections('pikademia_motyw');
    echo "<img src='$picture' class='profile-picture' id='profile-picture-preview'/>";
    submit_button();
    echo '</form>';
    echo 'Odwiedź nas na <a href="https://www.pikademia.pl/">www.pikademia.pl</a>';

Ostatecznie, umieszczając wszystko w jednym pliku (+ osobny plik do js i osobny plik css) otrzymamy coś takiego:

<?php

function pikademia_load_admin_scripts($hook){
    // nazwa strony to zazwyczaj toplevel_page_ + id strony
    // nazwę można zobaczyć w sekcji body wyświetlając zmienną $hook
    //echo $hook;
    if('toplevel_page_pikademia_motyw' != $hook){
        return;
    }
    wp_register_style('pikademia_admin_style', get_template_directory_uri().'/inc/pikademia-admin.css', array(), '1.0.0', 'all');
    wp_enqueue_style('pikademia_admin_style');
    
    wp_enqueue_media(); // add options for media uploader
    wp_register_script('pikademia_admin_script',get_template_directory_uri().'/inc/pikademia-admin.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script('pikademia_admin_script');
}
add_action('admin_enqueue_scripts', 'pikademia_load_admin_scripts');

function pikademia_add_admin_page(){
    add_menu_page(
        'Pikademia opcje',  // tytuł strony
        'Pikademia',        // tytuł menu widoczny w admin!!!
        'manage_options',   // capability
        'pikademia_motyw',  // page id !!!
        'pikademia_create_page',    //callback func. do utworzenia !!!!
        'dashicons-palmtree',       //ikona
        110                 //położenie w menu
    );
}
add_action('admin_menu','pikademia_add_admin_page');

function pikademia_create_page(){
    //require get_template_directory(). '/inc/pikademia-admin.php';
    $picture = esc_attr(get_option('profile_pic'));
    echo '<h1>Ustawienia motywu Pikademia</h1>';
    settings_errors();
    echo '<form method="post" action="options.php">';
    settings_fields('pikademia-settings-group');
    do_settings_sections('pikademia_motyw');
    echo "<img src='$picture' class='profile-picture' id='profile-picture-preview'/>";
    submit_button();
    echo '</form>';
    echo 'Odwiedź nas na <a href="https://www.pikademia.pl/">www.pikademia.pl</a>';
}

function pikademia_custom_settings(){

    register_setting(
        'pikademia-settings-group', // nazwa grupy opcji, do której się donosimy w funkcji settings_fields()
        'profile_pic'                // id opcji !!!!
    );
    add_settings_section(
        'pikademia-myoptions',  // id slug do identyfikacji sekcji w metodzie add_settings_field() !!!!
        'Opcje sekcji 1',       // wyświetlany tytuł, może być pusty
        'pikademia_options',    // callback function do utworzenia !!!
        'pikademia_motyw'       // id strony na której dodajemy sekcję(pobieramy z funkcji pikademia_add_admin_page)!!!
    );

    add_settings_field(
        'profile-pic-nazwa',   // id
        'Zdjęcie',              // wyświetlany tytuł pola !!
        'pikademia_settings_picture_field', //function callback do utworzenia !!!
        'pikademia_motyw', //id strony !!!
        'pikademia-myoptions' //section id z metody add_settings_section !!!
    );

}
add_action('admin_init', 'pikademia_custom_settings');

function pikademia_options(){
    // echo "Sekcja z ustawieniami";
}

function pikademia_settings_picture_field(){
    $picture = esc_attr(get_option('profile_pic'));
    echo '<input type="button" class="button button-secondary" value="Upload Prifle Picture" id="upload-button"/>';
    echo '<input type="hidden" id="profile-picture" name="profile_pic" value="'.$picture.'"/>';
}
Scroll to Top