Как интегрировать страницу параметров в тему WordPress

Создание тем для раздачи или продажи — это замечательно, но не у всех, кто использует вашу тему, будет хорошее понимание HTML / CSS. Предоставление вашей теме страницы параметров упрощает внесение изменений в тему для пользователей, не являющихся техническими специалистами, и не запачкает руки кодом. Я покажу вам, как сделать один с нуля!

Что мы собираемся достичь

Прежде чем мы начнем, к чему мы на самом деле стремимся? Что мы собираемся сделать настраиваемым в нашей теме? Ну, этот урок будет в основном сфокусирован на программировании, но для того, чтобы что-то изменить в макете, нам понадобится несколько идей по дизайну. Вот что мы имеем:

Изменить цветовую схему темы
Добавить 2x рекламные ролики
Дополнительная боковая панель
Дополнительная панель недавних твитов
Дополнительное окно поиска

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

1. Создание необходимых файлов

Мы собираемся полностью сосредоточиться на странице параметров, прежде чем мы начнем вносить изменения в тему. Во-первых, нам нужно место для размещения всего нашего кода, который будет управлять страницей параметров. Весь этот код будет находиться в файле functions.php , который будет находиться в нашей папке тем. Итак, если наша тема называется «пример», то путь к файлу наших функций будет wp-content / themes / example / functions.php .

Нам не нужно указывать WordPress включить наш файл functions.php , он автоматически вызывается во время цикла выполнения WordPress.

2. Создание страницы параметров

Итак, сначала нам нужно создать пустую страницу параметров — холст для нашей работы. Для этого мы должны сообщить WordPress о новой странице настроек, которую мы хотим создать. Мы решаем эту задачу, используя действия. Действия вызываются в определенное время при выполнении WordPress; так, например, когда создается меню в панели мониторинга, вызывается действие admin_menu . Мы можем связать функции с этими действиями; поэтому мы можем выполнять наши функции в определенное время. Вот основные функции, которые нам нужны для создания нашей страницы настроек.

<?php
// Options Page Functions
 
function themeoptions_admin_menu()
{
    // here’s where we add our theme options page link to the dashboard sidebar
    add_theme_page(«Theme Options», «Theme Options», ‘edit_themes’, basename(__FILE__), ‘themeoptions_page’);
}
 
function themeoptions_page()
{
    // here is the main function that will generate our options page
}
 
add_action(‘admin_menu’, ‘themeoptions_admin_menu’);
 
?>

Наша первая функция themeoptions_admin_menu просто добавляет ссылку на нашу страницу в боковой панели администратора, а также сообщает WordPress, какую функцию вызывать для отображения страницы, в нашем случае это themeoptions_page () .

Параметры для функции add_theme_page () следующие:

Заголовок страницы — Опции темы
Название меню — Опции темы
Возможность — edit_themes
Handle — текущий файл
Функция — themeoptions_page ()

Если у вас активирована тема, то в раскрывающемся меню Темы вы увидите новую ссылку на страницу параметров, которая в настоящее время пуста. Теперь у нас есть холст для нашей страницы параметров, и мы можем приступить к реализации форм, полей и серверной части функциональности наших параметров.

3. Добавление параметров и полей

Итак, эта страница выглядит немного одиноко; давайте добавим форму и поля, с которыми пользователь будет взаимодействовать, чтобы внести изменения в тему. Важно отметить, что вы можете стилизовать эту страницу по своему усмотрению, даже добавляя диалоги с вкладками, если хотите; но для нашего урока мы будем использовать классы по умолчанию, используемые WordPress. Таким образом, это экономит нам время на повторное изобретение колеса и делает нашу страницу параметров вписывающейся в остальную панель.

Код для нашей страницы должен находиться в нашей функции themeoptions_page () , поэтому мы собираемся добавить наш код следующим образом;

function themeoptions_page()
   {
       // here’s the main function that will generate our options page
       ?>
       <div class=»wrap»>
           <div id=»icon-themes» class=»icon32″><br /></div>
           <h2>Theme Options</h2>
 
           <form method=»POST» action=»»>
               <input type=»hidden» name=»update_themeoptions» value=»true» />
 
               <p><input type=»submit» name=»search» value=»Update Options» class=»button» /></p>
           </form>
 
       </div>
       <?php
   }

Сначала мы создаем предопределенный класс переноса для страницы. Затем мы добавляем быстрый заголовок со значком по умолчанию. Наконец, наша форма; нам нужно скрытое значение, чтобы мы могли проверить, было ли оно отправлено. Нам также нужна кнопка для отправки формы, и мы снова используем для этого предопределенный класс. Вот что мы имеем до сих пор:

Теперь у нас есть наша основная структура. Поэтому, если мы вернемся к началу этого урока, мы планировали реализовать пять вариантов.

Прежде всего, мы позволим пользователям темы изменять цветовую схему. Для этого нам потребуется выпадающий список доступных цветовых схем.
Во-вторых, у нас будет два рекламных места. Нам понадобятся два поля ввода для URL-адресов изображений и два поля ввода для ссылок.
Третий — это дополнительная боковая панель: простой флажок.
В-четвертых, необязательный поток Twitter на боковой панели. Нам понадобится флажок и поле ввода для имени пользователя.
Наконец, нам понадобится дополнительное поле поиска: еще один флажок.

function themeoptions_page()
{
    // here’s the main function that will generate our options page
    ?>
    <div class=»wrap»>
        <div id=»icon-themes» class=»icon32″><br /></div>
        <h2>Theme Options</h2>
 
        <form method=»POST» action=»»>
            <input type=»hidden» name=»update_themeoptions» value=»true» />
 
            <h4>Colour Stylesheet To Use</h4>
            <select name =»colour»>
                <option value=»red»>Red Stylesheet</option>
                <option value=»green»>Green Stylesheet</option>
                <option value=»blue»>Blue Stylesheet</option>
            </select>
 
            <h4>Advertising Spot #1</h4>
            <p><input type=»text» name=»ad1image» id=»ad1image» size=»32″ value=»»/> Advert Image</p>
            <p><input type=»text» name=»ad1url» id=»ad1url» size=»32″ value=»»/> Advert Link</p>
 
            <h4>Advertising Spot #2</h4>
            <p><input type=»text» name=»ad2image» id=»ad2image» size=»32″ value=»»/> Advert Image</p>
            <p><input type=»text» name=»ad2url» id=»ad2url» size=»32″ value=»»/> Advert Link</p>
 
            <h4><input type=»checkbox» name=»display_sidebar» id=»display_sidebar» /> Display Sidebar</h4>
 
            <h4><input type=»checkbox» name=»display_search» id=»display_search» /> Display Search Box</h4>
 
            <h4><input type=»checkbox» name=»display_twitter» id=»display_twitter» /> Display Twitter Stream</h4>
            <p><input type=»text» name=»twitter_username» id=»twitter_username» size=»32″ value=»» /> Twitter Username</p>
 
            <p><input type=»submit» name=»search» value=»Update Options» class=»button» /></p>
        </form>
 
    </div>
    <?php
}

4. Обновление базы данных

Пока что у нас есть страница параметров с формой, которая отправляет данные себе через POST. Следующий логический шаг — взять отправленные данные и вставить их в базу данных WordPress. Для этого мы собираемся создать новую функцию под названием themeoptions_update () . Эта функция будет вызываться themeoptions_page () ; так что добавьте этот код в самый верх themeoptions_page () ;

if ( $_POST[‘update_themeoptions’] == ‘true’ ) { themeoptions_update();

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

В любом месте файла functions.php добавьте этот блок кода:

function themeoptions_update()
{
    // this is where validation would go
    update_option(‘mytheme_colour’, $_POST[‘colour’]);
 
    update_option(‘mytheme_ad1image’, $_POST[‘ad1image’]);
    update_option(‘mytheme_ad1url’, $_POST[‘ad1url’]);
 
    update_option(‘mytheme_ad2image’, $_POST[‘ad2image’]);
    update_option(‘mytheme_ad2url’, $_POST[‘ad2url’]);
 
    if ($_POST[‘display_sidebar’]==’on’) { $display = ‘checked’;
    update_option(‘mytheme_display_sidebar’, $display);
 
    if ($_POST[‘display_search’]==’on’) { $display = ‘checked’;
    update_option(‘mytheme_display_search’, $display);
 
    if ($_POST[‘display_twitter’]==’on’) { $display = ‘checked’;
    update_option(‘mytheme_display_twitter’, $display);
 
    update_option(‘mytheme_twitter_username’, $_POST[‘twitter_username’]);
}

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

Пока что у нас есть страница настроек, на которой можно сохранить наши параметры, однако, когда мы нажимаем кнопку «Отправить», и наши параметры сохраняются, наша форма остается пустой, когда мы повторно ее посещаем. Это потому, что нам нужно загрузить наши значения обратно из базы данных.

5. Выбор вариантов

Теперь нам нужно выбрать наши параметры, чтобы мы могли заполнить форму настроек. Это очень просто, и мы сделаем это с помощью функции get_option () . Мы могли бы использовать переменные, но для этого примера мы просто отобразим вывод функции, куда она должна идти в форме. Наш новый код выглядит следующим образом;

function themeoptions_page()
{
    // here’s the main function that will generate our options page
 
    if ( $_POST[‘update_themeoptions’] == ‘true’ ) { themeoptions_update();
 
    //if ( get_option() == «checked»
 
    ?>
    <div class=»wrap»>
        <div id=»icon-themes» class=»icon32″><br /></div>
        <h2>Theme Options</h2>
 
        <form method=»POST» action=»»>
            <input type=»hidden» name=»update_themeoptions» value=»true» />
 
            <h4>Colour Stylesheet To Use</h4>
            <select name =»colour»>
                <?php $colour = get_option(‘mytheme_colour’);
                <option value=»red» <?php if ($colour==’red’) { echo ‘selected’;
                <option value=»green» <?php if ($colour==’green’) { echo ‘selected’;
                <option value=»blue» <?php if ($colour==’blue’) { echo ‘selected’;
            </select>
 
            <h4>Advertising Spot #1</h4>
            <p><input type=»text» name=»ad1image» id=»ad1image» size=»32″ value=»<?php echo get_option(‘mytheme_ad1image’); ?>»/> Advert Image</p>
            <p><input type=»text» name=»ad1url» id=»ad1url» size=»32″ value=»<?php echo get_option(‘mytheme_ad1url’); ?>»/> Advert Link</p>
 
            <h4>Advertising Spot #2</h4>
            <p><input type=»text» name=»ad2image» id=»ad2image» size=»32″ value=»<?php echo get_option(‘mytheme_ad2image’); ?>»/> Advert Image</p>
            <p><input type=»text» name=»ad2url» id=»ad2url» size=»32″ value=»<?php echo get_option(‘mytheme_ad2url’); ?>»/> Advert Link</p>
 
            <h4><input type=»checkbox» name=»display_sidebar» id=»display_sidebar» <?php echo get_option(‘mytheme_display_sidebar’);
 
            <h4><input type=»checkbox» name=»display_search» id=»display_search» <?php echo get_option(‘mytheme_display_search’);
 
            <h4><input type=»checkbox» name=»display_twitter» id=»display_twitter» <?php echo get_option(‘mytheme_display_twitter’);
            <p><input type=»text» name=»twitter_username» id=»twitter_username» size=»32″ value=»<?php echo get_option(‘mytheme_twitter_username’); ?>» /> Twitter Username</p>
 
            <p><input type=»submit» name=»search» value=»Update Options» class=»button» /></p>
        </form>
 
    </div>
    <?php
}

Так что у вас есть это. Бэк-энд теперь завершен. Мы можем обновить наши параметры в базе данных, поэтому все, что осталось сделать, это заставить тему реагировать на эти изменения на странице параметров. Это работает аналогично тому, как мы обновляли поля опций: мы выбираем опцию и затем либо отображаем ее, либо используем как условную для выполнения чего-то еще. Давайте начнем с внешнего интерфейса.

6. Изменение темы

Изменение цветовой схемы

Это будет касаться CSS и тому подобного, о чем не говорится в этом уроке. Итак, мы рассмотрим, как бы вы подошли к этому. Один из лучших способов добиться этого — иметь таблицу стилей по умолчанию, которая использует цветовую схему, такую как черный, а затем ряд альтернативных цветовых схем. Например, style.css может придать стилю макет черный, но в том числе red.css ПОСЛЕ, в том числе style.css .

Полезный совет по CSS — использовать тег ! Important. Используйте этот тег в таблицах стилей, которые изменяют цвета макета, чтобы гарантировать, что эти свойства будут фактически использоваться. Чтобы фактически переключить таблицы стилей, добавьте этот код в файл header.php вашего макета, куда будет включена таблица стилей:

<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_directory’); ?>/default.css» type=»text/css»>
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_directory’); ?>/<?php echo get_option(‘mytheme_colour’); ?>.css» type=»text/css»>

Добавление рекламных роликов

Этот раздел предназначен для того, чтобы показать вам теорию. В реальной жизни вы, вероятно, использовали бы плагин или что-то вроде «Buy Sell Ads». Допустим, у нас есть два места для размещения нашей рекламы. Как и в предыдущем примере, мы просто выводим опцию, в которую нужно перейти, например:

<a href=»<?php echo get_option(‘mytheme_ad1url’); ?>»><img src=»<?php echo get_option(‘mytheme_ad1image’); ?>» height=»125″ width=»125″ /></a>
<a href=»<?php echo get_option(‘mytheme_ad2url’); ?>»><img src=»<?php echo get_option(‘mytheme_ad2image’); ?>» height=»125″ width=»125″ /></a>

Дополнительная боковая панель

На этот раз мы будем использовать эту опцию в качестве условия, чтобы решить, следует ли выводить блок кода, который в этом случае будет отображать боковую панель. Конечно, ваш макет должен отображаться правильно, если боковая панель не видна; так что один зависит от вас. Следующий код будет добавлен везде, где вы обычно вызываете боковую панель, обычно мой вызывается из header.php .

if ( get_option(‘mytheme_display_sidebar’) == ‘checked’) { get_sidebar();
 
// or alternatively…
if ( get_option(‘mytheme_display_sidebar’) == ‘checked’) { get_sidebar();

Необязательные последние твиты

Для этого маленького варианта нам нужно сделать две вещи. Если твиты включены, нам сначала нужно отобразить область, где должны появиться твиты, нам также нужно вставить блок JavaScript перед тегом </ body>, чтобы получить твиты от определенного пользователя.

Нам нужно поместить следующее, где мы действительно хотим, чтобы твиты появлялись:

<?php if (get_option(‘mytheme_display_twitter’) ) { ?>
<div id=»twitter_div»>
    <ul id=»twitter_update_list»></ul>
</div>
<?php } ?>

Затем нам нужно поместить этот код перед тегом </ body> , который, скорее всего, находится в footer.php ;

<script src=»http://twitter.com/javascripts/blogger.js»></script>
<script src=»http://twitter.com/statuses/user_timeline/<?php echo get_option(‘mytheme_twitter_username’); ?>.json?callback=twitterCallback2&count=5″></script>

Совет: почему бы не попробовать добавить свой собственный параметр, чтобы изменить количество твитов, загруженных выше?

Дополнительное окно поиска

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

if ( get_option(‘mytheme_display_search’) == ‘checked’) { ?>
<form role=»search» method=»get» id=»searchform» action=»» >
    <input type=»text» value=»» name=»s» id=»s» />
</form>
<?php }

Завершение

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

Как обычно, если у вас есть какие-либо вопросы, оставьте комментарий ниже! Спасибо за прочтение!

Как интегрировать страницу параметров в тему WordPress

Что мы собираемся достичь

1. Создание необходимых файлов

2. Создание страницы параметров

3. Добавление параметров и полей

4. Обновление базы данных

5. Выбор вариантов

6. Изменение темы

Изменение цветовой схемы

Добавление рекламных роликов

Дополнительная боковая панель

Необязательные последние твиты

Дополнительное окно поиска

Завершение

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC