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.'"/>';
}