Створення сторінки налаштувань для вашої WordPress теми

() translation by (you can also view the original English article)

Створення власної теми для WordPress - відмінний спосіб додати вашому блогу чи іншому веб-сайту WordPress оригінальний образ. Але навіть найприємніша тема не буде такої приємна, якщо для дрібних змін вам потрібно лізти під капот і редагувати HTML або PHP-код теми. Особливо, коли це платить клієнт, який використовує вашу тему. На щастя в WordPress, процес створення сторінки налаштувань для вашої теми в WordPress зовсім не складний, і після прочитання цього уроку ви зможете створити її в найкоротші терміни!

Крок 1 Рішення про те, які налаштування необхідні

Все це починається з необхідності: щоб створити чітку і корисну сторінку налаштувань, вам потрібно з'ясувати, що можна буде змінити, і залишити все інше. Кожен новий параметр, який додається до меню адміністратора, ускладнює інтерфейс користувача і підвищує складність використання теми. Ось чому краще бути обережним і вручну вибирати параметри, які будуть часто змінюватися, і не враховувати дрібні настройки, які можуть бути легко змінені за допомогою одного файлу всередині теми.

Ще одне питання, яке слід мати на увазі: «Хто буде міняти ці налаштування?» Якщо користувач знайомий з PHP і WordPress, можна очікувати що у нього не буде проблем з вкладенням Google Analytics в код, але ви не повинні вимагати цього від графічного дизайнера , не кажучи вже про письменника, який навіть не має нічого знати про HTML і CSS.

Загальні ідеї для визначення об'єктів в налаштуваннях теми:

Код відстеження Google Analytics на сайті
Кількість бічних панелей і їх позиціонування (зліва, справа, може бути, навіть вгору і вниз)
Ширина сторінки
Вміст вашого футера
Параметри для функцій, характерних для теми, наприклад, призначені для користувача формати тізерів.

Після того, як ви зібрали список функцій теми, які ви хочете контролювати на сторінці налаштувань, ви майже готові перейти до реалізації. Перш ніж ви перейдете й створите сторінку налаштувань, ви можете заощадити час, переконавшись, що вже не існує функції WordPress для настройки, яку ви збираєтеся реалізувати. Віджети, призначені для користувача меню, призначені для користувача фони і зображення заголовків - все це корисні інструменти для настройки вашої теми з набагато меншою кількістю роботи, ніж потрібно для створення власних налаштувань. Проте, це теми для іншого уроку.

Налаштування, створені в цьому підручнику

У цьому навчальному посібнику мені прийшла в голову головна сторінка теми, що складається з сітки з різною кількістю обраних постів, які можна вибрати, відредагувати і змінити таким чином адміністратором за допомогою сторінки налаштувань.

Елементи головної сторінки в редакторі будуть представлені у вигляді списку елементів, до яких нові можуть бути додані за допомогою JavaScript та jQuery.

Мені подобається переглядати сторінку адміністратора в панелі адміністратора WordPress при розробці HTML-коду, тому я зазвичай починаю з прив'язки сторінки налаштувань до WordPress і тільки після цоьго переходжу до конструювання вмісту сторінки. Тому на наступному кроці ми створюємо заглушку для сторінки налаштувань і підключимо її до WordPress.

Крок 2 Підключення сторінки налаштувань до WordPress

Створення сторінки налаштувань починається зі створення функції, яка налаштовує меню і підключає його до дії admin_menu. Це повідомляє WordPress про те, щоб викликати вашу функцію, коли потрібно буде створити меню, щоб все було зроблено в потрібний час. Додайте цей код в файл functions.php вашої теми:

function setup_theme_admin_menus() {
    // We will write the function contents very soon.
}

// This tells WordPress to call the function named "setup_theme_admin_menus"
// when it's time to create the menu pages.
add_action("admin_menu", "setup_theme_admin_menus");

Тепер ми додамо код для створення сторінок налаштувань всередині щойно створеної функції.

При створенні сторінки налаштувань ви можете або додати сторінку в якості підміню в одну з існуючих груп налаштувань, або створити власне меню верхнього рівня.

Додавання підміню виконується за допомогою функції add_submenu_page:

1	<?php add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function) ?>

$parent_slug - унікальний ідентифікатор сторінки верхнього меню, до якого це підміню додається як дочірнє.
$page_title - назва сторінки, що додається
$menu_title - це назва, що відображається в меню (часто більш коротка версія $page_title
$capability - мінімальні вимоги для користувача для доступу до цього меню.
$menu_slug - унікальний ідентифікатор створюваного меню
$function - це ім'я функції, яка викликається для обробки (і візуалізації) цієї сторінки меню

Якщо ви вирішите додати сторінку меню в якості підміню в одну з груп WordPress, ви можете використовувати наступні значення як параметр $parent_slug:

Панель інструментів: index.php
Повідомлення: edit.php
Медіа: upload.php
Посилання: link-manager.php
Сторінки: edit.php?post_type=page
Коментарі: edit-comments.php
Зовнішній вигляд: themes.php
Модулі: plugins.php
Користувачі: users.php
Інструменти: tools.php
Налаштування: options-general.php

Група Appearance виглядає хорошим кандидатом для розміщення нашої сторінки налаштувань. Спробуємо її і створимо нашу першу сторінку налаштувань. Ось оновлена версія нашої функції настройки меню:

function setup_theme_admin_menus() {
    add_submenu_page('themes.php', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'front-page-elements', 'theme_front_page_settings'); 
}

Для цього нам ще потрібно створити функцію theme_front_page_settings. Ось вона в найпростішій формі:

1	function theme_front_page_settings() {
2	echo "Hello, world!";
3	}

І ось як це виглядає в дії:

Нам також необхідно перевірити, що у користувача є права, необхідні для редагування сторінки налаштувань. Для цього додайте наступний код на початку функції сторінки налаштувань:

1	// Check that the user is allowed to update options
2	if (!current_user_can('manage_options')) {
3	wp_die('You do not have sufficient permissions to access this page.');
4	}

Тепер, якщо користувач, якому не дозволено керувати параметрами, потрапляє на сторінку налаштувань, він не побачить нічого, крім повідомлення «У вас недостатньо прав для доступу до цієї сторінки».

Якщо вашій темі потрібні кілька сторінок налаштувань, це може збентежити користувача, коли доведеться шукати їх, розкиданих по всій структурі меню. В цьому випадку створення власної групи налаштувань полегшує користувачеві теми пошук всіх сторінок меню для теми.

Щоб додати свою власну групу налаштувань, вам потрібно створити сторінку меню верхнього рівня і зв'язати сторінки підміню з нею. Ось нова версія нашої функції настройки меню. Функція add_menu_page, яка використовується для створення меню верхнього рівня, схожа на add_submenu_page, за винятком того, що вона не приймає параметр $parent_slug.

function setup_theme_admin_menus() {
    add_menu_page('Theme settings', 'Example theme', 'manage_options', 
        'tut_theme_settings', 'theme_settings_page');
      
    add_submenu_page('tut_theme_settings', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'front-page-elements', 'theme_front_page_settings'); 
}

// We also need to add the handler function for the top level menu
function theme_settings_page() {
    echo "Settings page";
}

Якщо ви перевірите код і оновите панель адміністратора WordPress, ви побачите, що ваша нова група меню з'явиться в нижній частині списку меню:

Але поки щось не зовсім коректно. Клацання по елементу верхнього меню не приведе вас до меню «Головна сторінка», а на сторінку меню «Приклад теми». Це не узгоджується з тим, як функціонують інші меню WordPress, тому давайте зробимо ще одну річ: змінивши атрибут $menu_slug у виклику add_submenu_page на те ж значення, що і в меню верхнього рівня, ми можемо пов'язати два меню, щоб вибір верхнього меню вибирав меню головної сторінки:

function setup_theme_admin_menus() {
    add_menu_page('Theme settings', 'Example theme', 'manage_options', 
        'tut_theme_settings', 'theme_settings_page');
    	
    add_submenu_page('tut_theme_settings', 
        'Front Page Elements', 'Front Page', 'manage_options', 
        'tut_theme_settings', 'theme_front_page_settings'); 
}

function theme_settings_page() {

}

Тепер виглядає трохи краще. Якщо ви хочете поліпшити зовнішній вигляд своєї групи меню, є дві необов'язкові поля в функції add_menu_page, які ви знайдете корисними. Просто додайте значення після імені функції у виклику методу:

$icon_url вказує URL-адресу значка для меню верхнього рівня.
$position визначає позицію вашої групи меню в списку меню. Чим вище значення, тим нижче положення в меню.

Крок 3 Створення HTML форми для сторінок налаштувань

Тепер, коли ми створили сторінку налаштувань, і вона коректно відображається в бічному меню, прийшов час почати додавати контент. Отже, повернемося до списку налаштувань, які ми мали на увазі, і створимо сторінку для їх редагування.

У цьому уроці нам потрібно поле для визначення того, скільки елементів має бути зазначено в одному рядку, і список для визначення фактичних елементів. Щоб почати з легшого, давайте створимо текстове поле для кількості елементів в одному рядку. Відредагуйте функцію сторінки налаштувань:

function theme_front_page_settings() {
?>
    <label for="num_elements">
        Number of elements on a row:
    </label> 
    
    <input type="text" name="num_elements" />
<?php
}

Коли ви перезавантажте сторінку налаштувань, ви побачите перше поле налаштувань:

Щоб наша сторінка налаштувань легко вписалася в WordPress, найкраще використовувати класи і стилі CSS, які WordPress використовує на своїх власних сторінках налаштувань. Хороший спосіб вивчити ці трюки - це просто піти і проаналізувати вихідний код WordPress.

Найголовніше - обернути сторінку налаштувань за допомогою div з класом "wrap". Усередині цього елемента div ви можете використовувати багато зумовлені стилі, такі як заголовки, кнопки і поля форми. Почнемо з оформлення назви нашої сторінки налаштувань:

Ми створимо заголовок h2 для сторінки (ви можете використовувати теги заголовків від h2 до h6 для створення заголовків різних розмірів.)
Перед заголовком ми покажемо значок сторінки налаштувань теми. (Ви можете використовувати зумовлені значки WordPress за допомогою функції screen_icon. Функція може приймати один з наступних параметрів: index, edit, upload, link-manager, pages, comments, themes, plugins, users, tools або options-general.)
Ми помістимо елемент input в форму і таблицю з класом form-table.

function theme_front_page_settings() {
?>
    <div class="wrap">
        <?php screen_icon('themes'); ?> <h2>Front page elements</h2>

        <form method="POST" action="">
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">
                        <label for="num_elements">
                            Number of elements on a row:
                        </label> 
                    </th>
                    <td>
                        <input type="text" name="num_elements" size="25" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
<?php
}

Тепер прийшов час почати додавати елементи.

Щоб зробити це, ми будемо використовувати jQuery, оскільки він спрощує роботу, ніж якби ми писали JavaScript з нуля, і поставляється в комплекті з WordPress. Якщо ви раніше використовували jQuery, потрібно мати на увазі тільки одну річ: нотація $, яку ви зазвичай використовуєте з jQuery, не працює в WordPress - вам потрібно ввести ціле слово jQuery.

По-перше, ми створимо елемент для редагування параметрів для одного блоку головної сторінки, який буде служити шаблоном для елементів, доданих користувачем. Додайте цей код прямо між закриває тегом таблиці і закриває тегом форми відразу після нього.

<?php $posts = get_posts(); ?>

<li class="front-page-element" id="front-page-element-placeholder">
    <label for="element-page-id">Featured post:</label>
    <select name="element-page-id">
        <?php foreach ($posts as $post) : ?>
            <option value="<?php echo $post-<ID; ?>">
                <?php echo $post-<post_title; ?>
            </option>
        <?php endforeach; ?>
    </select>
    <a href="#">Remove</a>
</li>

Тепер це виглядає так:

Тепер, коли у нас є наш шаблон, прийшов час приховати його і створити JavaScript для його використання, щоб створювати нові рядки для постів на сторінці налаштувань. Встановіть стиль для елемента li в значення display:none;

1	<li class="front-page-element" id="front-page-element-placeholder" style="display:none">

Потім ми створимо список для зберігання елементів головної сторінки при додаванні і посилання, яку користувач натисне, щоб додати нові елементи. Я повторюю весь HTML, щоб ви могли чітко бачити, куди йдуть зміни:

<div class="wrap">
    <?php screen_icon('themes'); ?> <h2>Front page elements</h2>

    <form method="POST" action="">
        <table class="form-table">
            <tr valign="top">
                <th scope="row">
                    <label for="num_elements">
                        Number of elements on a row:
                    </label>
                </th>
                <td>
                    <input type="text" name="num_elements" size="25" />
                </td>
            </tr>                
        </table>

        <h3>Featured posts</h3>

        <ul id="featured-posts-list">
        </ul>
      
        <input type="hidden" name="element-max-id" />

        <a href="#" id="add-featured-post">Add featured post</a>   
    </form>
    
    <li class="front-page-element" id="front-page-element-placeholder" 
        style="display:none;">
        <label for="element-page-id">Featured post:</label>
        <select name="element-page-id">
            <?php foreach ($posts as $post) : ?>
                <option value="<?php echo $post->ID; ?>">
                    <?php echo $post->post_title; ?>
                </option>
            <?php endforeach; ?>
        </select>
        <a href="#">Remove</a>
    </li>

</div>

У реальному житті хорошою практикою буде помістити ваш JavaScript-код в окремий файл, але для того, щоб зробити цей підручник трохи легше, я додаю JavaScript в ту ж функцію за допомогою HTML вище, прямо перед wrap div:

<script type="text/javascript">
    var elementCounter = 0;
    jQuery(document).ready(function() {           
        jQuery("#add-featured-post").click(function() {
            var elementRow = jQuery("#front-page-element-placeholder").clone();
            var newId = "front-page-element-" + elementCounter;
               
            elementRow.attr("id", newId);
            elementRow.show();
               
            var inputField = jQuery("select", elementRow);
            inputField.attr("name", "element-page-id-" + elementCounter); 
                
            var labelField = jQuery("label", elementRow);
            labelField.attr("for", "element-page-id-" + elementCounter); 

            elementCounter++;
            jQuery("input[name=element-max-id]").val(elementCounter);
                
            jQuery("#featured-posts-list").append(elementRow);
               
            return false;
        });         
    });
</script>

JavaScript-код вище створює функцію, яка викликається, коли користувач клацає посилання з ідентифікатором add-featured-post. Ця функція клонує елемент списку шаблонів, який ми створили раніше, і оновлює його поля, щоб мати унікальні ідентифікатори та імена. Таким чином, всі вони будуть коректно відправлені з формою, коли користувач натисне кнопку відправити. Мінлива elementCounter містить наступний ідентифікатор для додавання. Вона також зберігається в прихованому полі, тому, коли форма відправляється, ми знаємо, скільки елементів сторінки потрібно очікувати.

Якщо ви натиснете посилання «Додати пост» пару раз, ви побачите, що в список додані елементи:

Але коли ви натискаєте на посилання remove, ви помітите, що нічого не відбувається. Давайте додамо функцію для видалення елементів зі списку:

1	function removeElement(element) {
2	jQuery(element).remove();
3	}

Нам також потрібно викликати функцію. Додайте наступний код перед инкрементом elementCounter.

1	var removeLink = jQuery("a", elementRow).click(function() {
2	removeElement(elementRow);
3	return false;
4	});

Перш ніж перейти до збереження форми, потрібно ще дещо зробити. Ми будемо використовувати плагін jQuery ui.sortable, щоб зробити елементи сторінки сортованими, перетягуючи їх один на одного. Щоб активувати цю функцію сортування, нам потрібно буде підключити відповідний файл JavaScript (який також поставляється разом з WordPress). Це можна зробити, додавши наступний рядок коду в кінець functions.php:

1	if (is_admin()) {
2	wp_enqueue_script('jquery-ui-sortable');
3	}

Потім ми додамо наступний JavaScript перед (або після) jQuery("#add-featured-post").click певним вище.

jQuery("#featured-posts-list").sortable( {
    stop: function(event, ui) {
        var i = 0;

        jQuery("li", this).each(function() {
            setElementId(this, i);                    
            i++;
        });
                    
        elementCounter = i;
        jQuery("input[name=element-max-id]").val(elementCounter);
    }
});

Цей фрагмент робить список відсортованих і додає подія, яке викликається всякий раз, коли користувач закінчує сортування. Оброблювач подій оновлює всі ідентифікатори елементів, щоб новий порядок зберігався також при збереженні форми (це стане ясніше після реалізації збереження). При написанні цього обробника я помітив, що код для установки ідентифікатора для вмісту шаблону дублювався в двох місцях, тому я реорганізував його в свою власну функцію, яку я розмістив прямо перед рядком з jQuery(document).ready():

function setElementId(element, id) {
    var newId = "front-page-element-" + id;    
                     
    jQuery(element).attr("id", newId);               
               
    var inputField = jQuery("select", element);
    inputField.attr("name", "element-page-id-" + id); 
                
    var labelField = jQuery("label", element);
    labelField.attr("for", "element-page-id-" + id); 
}

Після додавання нових елементів, їх сортуванням та видаленням, прийшов час перейти до збереження даних. Але перед цим додайте кнопку відправлення прямо перед закриває тегом форми.

1	<p>
2	<input type="submit" value="Save settings" class="button-primary"/>
3	</p>

Крок 4 Збереження форми

Сторінка налаштувань виглядає добре, але чогось не вистачає: вона нічого не робить. Прийшов час зберегти деякі дані. WordPress забезпечує легку систему для збереження налаштувань теми і плагіна в якості пар ключ-значення в базі даних з використанням двох функцій: get_option та update_option. Дані, що зберігаються з використанням цих функцій, можуть бути простими, як наприклад числове значення або складними, як масив, вкладений кілька разів.

Обробка форми виконується в тій же функції, яка відображає форму. Щоб дізнатися, чи була форма відправлена чи ні, ми додамо приховане поле, update_settings в форму і потім перевіримо, чи було це поле відправлено чи ні в функції обробки.

1	if (isset($_POST["update_settings"])) {
2	// Do the saving
3	}

Приховане поле, яке входить в форму, виглядає наступним чином:

1	<input type="hidden" name="update_settings" value="Y" />

Почнемо з збереження більш простого налаштування num_elements. Ми екрануючи атрибута, щоб переконатися, що користувач не відправляє шкідливий контент в теги HTML, а потім зберігає його в сховище налаштувань WordPress. При використанні update_option нам не потрібно турбуватися про те, чи була ця настройка вже збережена чи ні.

1	$num_elements = esc_attr($_POST["num_elements"]);
2	update_option("theme_name_num_elements", $num_elements);

Перш ніж перейти до збереження списку, давайте додамо поточне значення num_elements в форму налаштувань, щоб користувач завжди бачив, яке значення він ввів, перш ніж приймати рішення про такому значенні. Це також допоможе нам перевірити, чи дійсно значення було збережено.

1	<input type="text" name="num_elements" value="<?php echo $num_elements;?>" size="25" />

І для випадків, коли ми ще нічого не зберегли, нам потрібно буде завантажити поточне значення з параметрів, тому давайте додамо цей шматок коду, який буде виконаний, коли форма ще не була відправлена.

1	$num_elements = get_option("theme_name_num_elements");

Коли форма зберігається, важливо повідомити користувача, щоб вона не залишала сумнівів у тому, сталося щось чи ні. Отже, давайте зробимо просте повідомлення про те, що «Налаштування збережені». відразу після update_option:

1	?>
2	<div id="message" class="updated">Settings saved</div>
3	<?php

Потім збережемо елементи передньої сторінки. Найбільше значення id в елементах сторінки передається як element-max-id, тому ми можемо взяти це значення і перебрати елементи до цього ідентифікатора, зберігши їх дані в масиві в правильному порядку:

$front_page_elements = array();
        
$max_id = esc_attr($_POST["element-max-id"]);
for ($i = 0; $i < $max_id; $i ++) {
    $field_name = "element-page-id-" . $i;
    if (isset($_POST[$field_name])) {
        $front_page_elements[] = esc_attr($_POST[$field_name]);
    }
}
        
update_option("theme_name_front_page_elements", $front_page_elements);

Це зберігає дані, але нам все одно потрібно підставити значення на сторінці налаштувань. Отже, давайте зробимо те ж саме, що і в поле num_elements і завантажимо параметри за замовчуванням на початку функції:

1	$front_page_elements = get_option("theme_name_front_page_elements");

І потім, відобразимо існуючі елементи при побудові форми:

<?php $element_counter = 0; foreach ($front_page_elements as $element) : ?>
    <li class="front-page-element" id="front-page-element-<?php echo $element_counter; ?>">
        <label for="element-page-id-<?php $element_counter; ?>">Featured post:</label>
        <select name="element-page-id-<?php $element_counter; ?>">
                    
        <?php foreach ($posts as $post) : ?>
            <?php $selected = ($post->ID == $element) ? "selected" : ""; ?>
            <option value="<?php echo $post->ID; ?>" <?php echo $selected; ?>>
                <?php echo $post->post_title; ?>
            </option>
        <?php endforeach; ?>
            
        </select>

        <a href="#" onclick="removeElement(jQuery(this).closest('.front-page-element'));">Remove</a>
    </li>
           
<?php $element_counter++; endforeach; ?>

Нам також потрібно встановити початкове значення для змінної elementCounter, використовуваної в JavaScript, встановивши початкове значення прихованого поля в PHP і прочитавши його при ініціалізації змінної в JavaScript:

1	<input type="hidden" name="element-max-id" value="<?php echo $element_counter; ?>" />

І частина JavaScript:

1	var elementCounter = jQuery("input[name=element-max-id]").val();

Крок 5 Використання налаштувань всередині теми

Збереження і відображення значень параметрів в межах області адміністрування готове, але насправді важливо, як ви їх використовуєте для настройки теми, тому тепер ми підійшли до точки, де прийшов час прийняти наші настройки і зробити з ними щось класне.

З цього моменту зміни потрапляють в index.php замість functions.php. Спочатку ми розглянемо параметри змінних:

1	<?php
2	$num_elements = get_option("theme_name_num_elements");
3	$elements = get_option("theme_name_front_page_elements");
4	?>

Давайте пройдемося по списку $elements, згрупуємо їх в рядки з блоками $num_elements в кожному.

<div id="front-page-element-container">

    <div class="front-page-element-row">
        <?php foreach($elements as $post_id) : ?>
            <?php if ($num == $num_elements) : ?>
                </div>
                <div class="front-page-element-row">
            <?php endif; ?>

            <!-- Render element here -->
                    
        <?php endforeach; ?>
    </div>

</div>

І потім, використовуючи дані, збережені для кожного елемента, ми заповнимо вищеописану частина елемента:

<?php $element_post = get_post($post_id); ?>

<div class="front-page-element">
    <div class="thumbnail-image">
        <?php if (has_post_thumbnail($post_id)) : ?>
            <?php echo get_the_post_thumbnail($post_id, 'tutorial-thumb-size'); ?>
        <?php endif; ?>

        <a class="title" href="<?php echo get_permalink($post_id); ?>"><?php echo $element_post->post_title;?></a>
    </div>
</div>

З кількома елементами це виглядає приблизно так:

Все ще досить таки нудно. Пости не мають зменшених зображень, і для них немає стилю. Щоб вони виглядали краще, давайте спочатку додамо підтримку мініатюр зображень. Це робиться шляхом підключення нової функції, яка налаштовує можливості теми, яка буде викликатися відразу після завантаження теми.

function setup_theme_features() {
    if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
    }

    if (function_exists("add_image_size")) {
        add_image_size('tutorial-thumb-size', 200, 200, true);
    }
}

add_action('after_setup_theme', 'setup_theme_features');

Функція, setup_theme_features включає мініатюри повідомлень, використовуючи функцію WordPress add_theme_support, так що WordPress додає цю функціональність на сторінку збереження постів. На сторінці посту ми можемо додати одне зображення у вигляді ескізу, натиснувши «Використовувати зображення» на сторінці завантаження зображення після завантаження фотографії.

Функція також визначає новий тип розміру зображення, tutorial-thumb-size, який використовується при отриманні ескізу поста в коді рендеринга.

Після вибору відображуваного зображення збережіть зміни і перезавантажте сторінку. Виглядає більш цікаво:

Нарешті, ми додамо кілька стилів в style.css, ось тепер тема має настроюється відображення постів:

.front-page-element-row {
    overflow: auto;
}

.front-page-element {
    float: left;
    margin: 10px 10px 10px 10px;
    padding: 0px;

    width: 200px;
    height: 200px;    
}

.thumbnail-image {  
    width: 200px;
    height: 200px;

    background: #eee;
    position: relative;
}

.thumbnail-image .title {
    position: absolute;
    bottom: 20px;

    display: block;
    background: #000;
    color: #fff;
    padding: 10px;

    font-family: Arial;
    font-size: 12pt;
    text-decoration: none;    
}

Висновок

Тепер ми створили сторінку налаштувань для кастомной теми. Хоча тема ще далека від завершення, але я сподіваюся, що це введення змусило вас розпочати роботу з додаванням налаштувань і параметрів, що елементів в ваше наступну тему WordPress.