Як налаштувати свої сайдбари в Записах та Сторінках

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

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

Крок 1. Додавання сайдбарів у сторінці налаштувань теми (Twenty Eleven)

По-перше, ми додамо нове налаштування в Зовнішній вигляд → Теми. Як це зробити, ви можете прочитати тут.

Відкрийте файл theme-options.php, розміщений у папці twentyeleven/inc і додайте цей код до кінця функції twentyeleven_theme_options_init()

add_settings_field( 'custom_sidebar', __( 'Custom sidebars', 'twentyeleven' ), 'twentyeleven_settings_field_custom_sidebar', 'theme_options', 'general' );

Потім додайте значення за промовчанням (порожній масив) до параметрів теми за промовчанням в кінці функції twentyeleven_get_default_theme_options():

$default_theme_options = array(
	'color_scheme' => 'light',
	'link_color'   => twentyeleven_get_default_link_color( 'light' ),
	'theme_layout' => 'content-sidebar',
	'custom_sidebar' => array()
);

Тепер ми створимо функцію зворотного дзвінка, яка обробляє показ налаштувань.

Давайте додамо деякий jQuery, який обробить події, наприклад, додавання або видалення сайдбарів.

function twentyeleven_settings_field_custom_sidebar()
{
	// Retrieve theme options
	$opts = twentyeleven_get_theme_options();

	// A bit of jQuery to handle interactions (add / remove sidebars)
	$output = "<script type='text/javascript'>";
	$output .= '
				var $ = jQuery;
				$(document).ready(function(){
					$(".sidebar_management").on("click", ".delete", function(){
						$(this).parent().remove();
					});

					$("#add_sidebar").click(function(){
						$(".sidebar_management ul").append("<li>"+$("#new_sidebar_name").val()+" <a href='#' class='delete'>'.__("delete", $themename).'</a> <input type='hidden' name='twentyeleven_theme_options[custom_sidebar][]' value='"+$("#new_sidebar_name").val()+"' /></li>");
						$("#new_sidebar_name").val("");
					})

				})
	';

	$output .= "</script>";

	$output .= "<div class='sidebar_management'>";

	$output .= "<p><input type='text' id='new_sidebar_name' /> <input class='button-primary' type='button' id='add_sidebar' value='".__("add", $themename)."' /></p>";

	$output .= "<ul>";

	// Display every custom sidebar
	if(isset($opts['custom_sidebar']))
	{
		$i = 0;
		foreach($opts['custom_sidebar'] as $sidebar)
		{
			$output .= "<li>".$sidebar." <a href='#' class='delete'>".__("delete", $themename)."</a> <input type='hidden' name='twentyeleven_theme_options[custom_sidebar][]' value='".$sidebar."' /></li>";
			$i++;
		}
	}

	$output .= "</ul>";

	$output .= "</div>";

	echo $output;
}

Додайте цей код до функції twentyeleven_theme_options_validate() для перевірки форми введення:

if ( isset( $input['custom_sidebar'] ) ) {
	$output['custom_sidebar'] = $input['custom_sidebar'];
}

Тепер ви можете керувати та зберігати власні сайдбари у вашій темі. Наприклад, давайте створимо новий сайдбар під назвою "My custom sidebar". Сторінка налаштувань вашої теми має виглядати приблизно так:

Крок 2. Реєстрація власних сайдбарів

Тепер ми можемо додати свої сайдбари, і нам потрібно зареєструвати їх, щоб вони з'явилися на сторінці адміністрування віджетів.

У темі Twenty Eleven це робиться у функції twentyeleven_widgets_init(). Так що в кінці цієї функції додайте наступне:

$options = twentyeleven_get_theme_options();

if(isset($options['custom_sidebar']) && sizeof($options['custom_sidebar']) > 0)
{
	foreach($options['custom_sidebar'] as $sidebar)
	{
		register_sidebar( array(
			'name' => __( $sidebar, 'twentyeleven' ),
			'id' => generateSlug($sidebar, 45),
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget' => "</aside>",
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>',
		) );
	}
}

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

function generateSlug($phrase, $maxLength)
{
	$result = strtolower($phrase);

	$result = preg_replace("/[^a-z0-9s-]/", "", $result);
	$result = trim(preg_replace("/[s-]+/", " ", $result));
	$result = trim(substr($result, 0, $maxLength));
	$result = preg_replace("/s/", "-", $result);

	return $result;
}

Тепер перейдіть в Зовнішній вигляд → Віджети, ви повинні побачити новий сайдбар:

Крок 3. Додавання блоку Meta

Тепер, коли наші власні сайдбари вже доступні, ми додамо блок Meta для показу списку всіх сайдбарів, доступних у формі редагування запису.

Якщо ви не знайомі з Meta блоками, ви можете звернутися до таких джерел:

• add_meta_box on the WordPress codex
• How to Create Custom WordPress Write/Meta Boxes
• Reusable custom meta box series

Тепер розглянемо код.

Додавання Meta блоків

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

Отже, відкрийте ваш файл functions.php і додайте до нього таке:

/* Define the custom box */

add_action( 'add_meta_boxes', 'add_sidebar_metabox' );
add_action( 'save_post', 'save_sidebar_postdata' );

/* Adds a box to the side column on the Post and Page edit screens */
function add_sidebar_metabox()
{
	add_meta_box(
		'custom_sidebar',
		__( 'Custom Sidebar', 'twentyeleven' ),
		'custom_sidebar_callback',
		'post',
		'side'
	);
	add_meta_box(
		'custom_sidebar',
		__( 'Custom Sidebar', 'twentyeleven' ),
		'custom_sidebar_callback',
		'page',
		'side'
	);
}

Створення функції зворотного дзвінка

Тепер давайте створимо функцію custom_sidebar_callbackяка виведе розмітку Meta блоків.

У цій функції є кілька ключових кроків:

• отримання всіх зареєстрованих сайдбарів (включаючи стандартний сайдбар теми) через глобальну змінну $wp_registered_sidebars;
• одержання meta записів;
• створення тимчасового захисту;
• додавання вибраного елемента з усіма сайдбарами плюс стандартний, визначений безпосередньо у файлі шаблону.

/* Prints the box content */
function custom_sidebar_callback( $post )
{
	global $wp_registered_sidebars;

	$custom = get_post_custom($post->ID);

	if(isset($custom['custom_sidebar']))
		$val = $custom['custom_sidebar'][0];
	else
		$val = "default";

	// Use nonce for verification
	wp_nonce_field( plugin_basename( __FILE__ ), 'custom_sidebar_nonce' );

	// The actual fields for data entry
	$output = '<p><label for="myplugin_new_field">'.__("Choose a sidebar to display", 'twentyeleven' ).'</label></p>';
	$output .= "<select name='custom_sidebar'>";

	// Add a default option
	$output .= "<option";
	if($val == "default")
		$output .= " selected='selected'";
	$output .= " value='default'>".__('default', $themename)."</option>";

	// Fill the select element with all registered sidebars
	foreach($wp_registered_sidebars as $sidebar_id => $sidebar)
	{
		$output .= "<option";
		if($sidebar_id == $val)
			$output .= " selected='selected'";
		$output .= " value='".$sidebar_id."'>".$sidebar['name']."</option>";
	}

	$output .= "</select>";

	echo $output;
}

Збереження Meta блоку

Тепер давайте збережемо meta опис нашого запису. Тут знову кілька кроків:

• перевірка наявності автозбереження WordPress;
• перевірка захисту та авторизації;
• збереження post_meta.

/* When the post is saved, saves our custom data */
function save_sidebar_postdata( $post_id )
{
	// verify if this is an auto save routine.
	// If it is our form has not been submitted, so we dont want to do anything
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
	  return;

	// verify this came from our screen and with proper authorization,
	// because save_post can be triggered at other times

	if ( !wp_verify_nonce( $_POST['custom_sidebar_nonce'], plugin_basename( __FILE__ ) ) )
	  return;

	if ( !current_user_can( 'edit_page', $post_id ) )
		return;

	$data = $_POST['custom_sidebar'];

	update_post_meta($post_id, "custom_sidebar", $data);
}

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

Крок 4. Налаштування файлів шаблону

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

Давайте створимо нову сторінку на базі шаблону сайдбару (доступно у блоці атрибутів сторінки). Цей шаблон базується на файлі sidebar-page.php. Відредагуйте цей файл, додавши кілька рядків вгорі (під закоментованим заголовком шаблону):

$options = get_post_custom(get_the_ID());

if(isset($options['custom_sidebar']))
{
	$sidebar_choice = $options['custom_sidebar'][0];
}
else
{
	$sidebar_choice = "default";
}

Ми отримали поточні цілі дані запису для вибраного сайдбара.

Щоб переключитися між власним сайдбаром та стандартним, змініть виклик get_sidebar () внизу цього файлу на наступне:

if($sidebar_choice && $sidebar_choice != "default")
{
	get_sidebar("custom");
}
else
{
	get_sidebar();
}

get_sidebar($slug) звертається до sidebar-slug.php. Так що там потрібно зробити, це створити файл з назвою sidebar-custom.php і додати всередину наступне:

$options = get_post_custom($post->ID);
$sidebar_choice = $options['custom_sidebar'][0];

?>
<aside id="sidebar" class="floatleft">

	<ul class="widgets">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
			dynamic_sidebar($sidebar_choice);
		else :
			/* No widget */
		endif; ?>
	</ul>

</aside>

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

Я не розповідатиму, як застосувати це до записів, оскільки там все так само, вам просто потрібно оновити файл Зміст-single.php для керування своїми сайдбарами.

Це все! Тепер ми можемо використовувати необмежену кількість сайдбарів для наших сторінок та записів. Це тільки один з варіантів рішення, але це простий і швидкий спосіб впровадження власних сайдбарів, тому залишайте коментарі, ділитеся ідеями.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/