Webamator Blog

Настраиваемое лого в шаблоне WordPress
MENU
Home » wordpress » Настраиваемое лого в шаблоне WordPress

Настраиваемое лого в шаблоне WordPress

Многие премиум-шаблоны WordPress имеют страницу настроек шаблона, которая является весьма удобным инструментом для тех, кто не знаком с языками разметки или программирования.
Как правило, на странице настроек можно изменить логотип, цветовую гамму сайта, расположение рекламных блоков или счетчиков, и при этом не нужно копаться в коде самого шаблона.

А как быть, если ваша тема не имеет страницы настроек? В сегодняшнем уроке мы попробуем создать и подключить такую страницу – которая позволит нам указывать выбранную картинку в качестве логотипа.
Весь описанный в примере код можно ставить в functions.php вашей темы, но лично я предпочитаю другой способ:
1 – в каталоге шаблона создадим файл settings.php – именно в нем будем писать наш код
2 – в файле functions.php добавим строку include_once(’settings.php’);

Регистрация страницы настроек

<?php
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}

function add_settings_page() {
add_theme_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'edit_theme_options', 'settings', 'theme_settings_page');
}

add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );
?>

Мы создали инициализацию страницы настроек, а так же выводим ссылку на нее в главном меню панели администратора. Две последние строки включают добавление действий WordPress.

Обработка формы

function theme_settings_page() {

if ( ! isset( $_REQUEST['settings-updated'] ) )
$_REQUEST['settings-updated'] = false;

<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div class="wrap">
<div id="message" class="updated">
<p><strong><?php _e( 'Options saved' ); ?></strong></p>
</div>
</div>
<?php endif; ?>

//тут, собственно может быть расположен код самой формы

}

Далее мы добавили простой обработчик формы – теперь в случае успешного обновления мы увидим сообщение о том что настройки сохранены. Саму форму можно поставить в месте, помеченном комментарием.

Форма

<form method="post" action="options.php">

<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>

<input id="theme_settings[custom_logo]" type="url" placeholder="URL for logo" size="60" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" />

</form>

Всего одно поле, для примера нам его вполне достаточно.
Внимание!
В примере отсутствует валидация данных, копипастить данный код опасно для вашего сайта! На рабочем проекте обязательно проверяйте входящие данные!

Вывод логотипа на блоге

<?php
$options = get_option( 'theme_settings' );
if($options['custom_logo']) {
?>
<div id="logo">
<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>"><img src="<?php echo $options['custom_logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
</div>

<?php
} else {
//дефолтная картинка, либо надпись вроде "вставьте ваше лого"
}
?>

Используя функцию get_option получаем массив со значениями из нашей формы. А поскольку поле мы обозвали custom_logo, ссылка на логотип будет храниться в $options['custom_logo']. Выводим либо $options['custom_logo'], либо что-то дефолтное.

Вот и все. Надеюсь, вы убедились что создание собственной страницы настроек довольно просто. А если что-то непонятно, или появились дополнительные вопросы – вы их как всегда можете оставить в комментариях.

Popularity: 41%

Добавлено 21 октября 2015
Рубрика: wordpress
Метки: , ,

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Также рекомендую публикации, похожие на "Настраиваемое лого в шаблоне WordPress"

Подключение JS только там, где это необходимо

Один из методов ускорения скорости загрузки сайтов на вордпресс – подключение дополнительных файлов только там, где это необходимо. Если судить по тем сайтам, которые меня просили оптимизировать, проблема достаточно [...]

SLON – пример плагина

Повторное подключение JavaScript приводит к его повторному выполнению, то есть к проблеме производительности сайта. Кроме того, это может привести к неприятным побочным эффектам – например, если данный скрипт [...]

Single Load Only. Избавляемся от дублирования js

В данной статье я расскажу об одной из проблем Wordpress – повторному подключению javascript. Подключение скрипта несколько раз приводит к его повторному выполнению, т.е. страдает производительность. Кроме того, [...]

Что нового в WordPress 4.8

WordPress Version 4.8, названная «Evans» в честь джазового пианиста и композитора Уильяма Джона «Bill» Evans, доступна для загрузки или обновления на панели инструментов WordPress 8 июня 2017 года. [...]

Нет комментариев

No comments yet.

RSS feed for comments on this post.

Leave a comment