Прості налаштування стандартних можливостей WordPress

Найкраще, що є у WordPress – його гнучкість. Чи не подобається тема? Просто змініть її. Потрібен додатковий функціонал? Швидше за все, є плагін, який ви можете завантажити чи купити. Якщо ні, ви можете його створити самі! Ви можете змінити багато в WordPress. У цій статті ми пройдемося кількома простим способам налаштування WordPress, про які ви могли не знати раніше.

1. Зміна джерела jQuery за замовчуванням

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

Допустимо, ми хочемо позбавити наш сервер від навантаження, змінивши версію jQuery WordPress на якесь рішення, яке розміщується на сторонньому хостингу (або CDN). Ми можемо легко змінити джерело jQuery за допомогою цієї функції:

function add_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.7.1.min.js');
    wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'add_scripts');

Тут ми робимо три речі.

1. По-перше, ми використовуємо wp_deregister_script () Для того, щоб повідомити WordPress, потрібно забути про версію jQuery, яка в даний момент використовується.
2. Потім ми використовуємо wp_register_script() для перереєстрації jQuery (як ім'я скрипта за допомогою CDN версії jQuery).
3. Нарешті ми використовуємо wp_enqueue_script () додати jQuery в нашу тему або плагін.

Слід зазначити, що ми використовуємо add_action (), А не add_filter (), щоб додати наші скрипти. Оскільки ми не вносимо жодних змін до контенту, а сподіваємось на те, що WordPress зробить щось для того, щоб завантажити наші скрипти, ми використовуємо зачіпку за action, а не за filter. Про це можна прочитати в WordPress Codex.

2. Додавання розмірів зображень

Ми знаємо, що WordPress встановлює кілька розмірів зображень, які завантажуємо. А ви знали, що ви можете (щодо просто) встановлювати свої розміри зображень? І все за допомогою двох найпростіших функцій. Якщо у нас є своє зображення у шапці розміром 760 × 300 px для наших записів ми можемо зробити можливість завантаження зображень такого розміру за допомогою цього коду:

add_theme_support( 'post-thumbnails' );
add_image_size( 'post-header', 760, 300, true );

Перша функція, add_theme_support(), повідомляє WordPress, що потрібно дозволити нові розміри не тільки мініатюр, але й мініатюр записів і зображень. У другому рядку, add_image_size(), ми додаємо наш новий розмір. Ця функція приймає чотири аргументи: ім'я, ширину, висоту і чи потрібно обрізати зображення.

WordPress також дуже не радить використання деяких зарезервованих імен (тобто: не використовуйте їх): великий палець руки, слайдами, середа, великий и post-thumbnail.

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

if ( has_post_thumbnail() ){ 
	the_post_thumbnail( 'post-header' ); 
}

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

if ( has_post_thumbnail() ){ 
	the_post_thumbnail( 'post-header' ); 
}else{
	<img src="'. IMAGES .'/default.jpg" alt="Post Header Image" />
}

У разі, якщо запис не має мініатюри, використовується зображення за промовчанням. Ура, готове!

3. Зміна розмітки сайдбару

Реєстрація сайдбару не потребує багато зусиль. Все, що вам потрібно, це ім'я и IDзробити все чітким і зрозумілим в адміністративній частині.

register_sidebar( array (
	'name' => __( 'Sidebar', 'main-sidebar' ),
	'id' => 'primary-widget-area'
));

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

register_sidebar( array (
	'name' => __( 'Sidebar', 'main-sidebar' ),
	'id' => 'primary-widget-area',
	'description' => __( 'The primary widget area', 'wpbp' ),
	'before_widget' => '<div class="widget">',
	'after_widget' => "</div>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

Цей код створить сайдбар, який виглядає приблизно так:

4. Зміна частоти оновлення RSS віджету

Вбудований у WordPress RSS віджет фантастичний, але іноді він оновлюється досить часто. На щастя, є просте рішення для цього. Просто додайте цей код у ваш файл functions.php:

add_filter( 'wp_feed_cache_transient_lifetime', 
   create_function('$a', 'return 600;') );

Як бачите, ми використовуємо функцію WordPress add_filter (), яка приймає зачіпку filter, функцію зворотного виклику та (опціонально) пріоритет. Зачіпка wp_feed_cache_transient_lifetime обробляє частоту оновлення стрічки. Ми створюємо функцію зворотного дзвінка на льоту, використовуючи функцію PHP create_function(). Це один рядок, який повертає частоту оновлення за секунди. У нас встановлена ​​частота оновлення – раз на 10 хвилин.

5. Додавання контенту в RSS стрічку

Можливість WordPress додавати потрібний контент до RSS-стрічки (наприклад, контент, який можуть бачити лише передплатники) — особливо класна. Це може бути будь-що: реклама, приховані повідомлення або цінна інформація. У наступному прикладі ми додамо приховане повідомлення:

function add_to_feed($content){
   $content .= "<p>Thanks for Subscribing! You're the best ever!</p>";
   return $content;
}

add_filter( "the_content_feed", "add_to_feed" );

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

6. Виділення коментарів автора

Один досить поширений підхід – виділення коментарів автора серед коментарів від читачів. Я роблю так у себе в блозі:

То як нам це зробити? У WordPress до версії 2.7 був потрібен додатковий код для того, щоб визначити, чи збігається ID автора та коментатора. У моєму блозі я просто перевіряв, чи був ID коментатора 1, тобто ID адміністратора. Не дуже добре, я знаю, але я був молодий і наївний (а блог був лише одним автором).

Версія після 2.7 має хорошу маленьку функцію wp_list_commentsяка виводить коментарі до запису. Навіть краще, вона застосовує клас .bypostauthor до будь-якого коментаря — так, ви вгадали — автора посту. Тепер, щоб зробити інший стиль коментарям автора, все, що нам потрібно, це зробити наступне:

.comment { /* Reader comments */
   background: #FFFFFF;
   color: #666666;
}

.bypostauthor { /* Author comments */
   background: #880000;
   color: #FFFFFF;
}

Готово! Легко, чи не так?

Підказка: якщо вам не подобається, що WordPress вказує вам, яку розмітку використовувати у блоці коментарів, ви можете вказати йому використати власну функцію виведення.

<ul class="commentlist">
	<?php wp_list_comments('type=comment&callback=my_comment_display'); ?>
</ul>

Далі ви створюєте функцію my_comment_display()яка виводить ваші коментарі. Більше інформації про це ви можете знайти у Кодекс.

7. Редагування опублікованого контенту

Так само, як ми раніше редагували контент стрічки, ми можемо вчинити з контентом нашого сайту, використовуючи фільтр the_content. Тут ми додамо підпис автора до кінця контенту:

function sig_to_content($content){
   $content .= '<p><img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /></p>';
   return $content;
}

add_filter( "the_content", "sig_to_content" );

Поки що ви використовували функцію add_filter () та зворотного виклику. В даному випадку, наш фільтр - the_content. Це додасть підпис наприкінці і постів, і записів. Щоб відфільтрувати сторінки, нам потрібно просто додати цю умову:

function sig_to_content($content){
   if(is_single()){
   		$content .= '<p><img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /></p>';
   		return $content;
   }
}

Ця функція, is_single(), перевіряє, чи ми переглядаємо окрему посаду.

8. Створення свого шаблону для таксономії

Я почав використовувати WordPress ще 2004 року. Це було перед тим, як були представлені сторінки, плагіни та розширене редагування. Зважаючи на цю еволюцію в напрочуд гнучку платформу, я пам'ятаю, як я робив специфічні речі з деякими категоріями та тегами, використовуючи вирази if у файлі шаблону single.php. Нині все набагато простіше.

У WordPress є неймовірно складна ієрархія шаблонів. Все зводиться до index.php, тоді як шаблони, такі як page.php и single.php, відображають різні типи контенту по-різному. Але ви можете зробити щось конкретне з category.php і навіть з home.php.

Як ви могли здогадатися, home.php - це ваша головна сторінка, а category.php відображає відповідні записи, коли користувач переглядає категорію. Чого ви могли не знати, то це те, що ви можете робити щось для конкретної категорії. Створивши шаблон під назвою category-[slug].php або category-[id].php (Наприклад, category-news.php або категорія-6.php), ви кажете WordPress, "Використовуй цей шаблон конкретно для цієї категорії". Я зазвичай копіюю index.php або category.php та редагую їх.

9. Налаштування блоку пошуку

Ви також можете налаштувати блок пошуку, створивши шаблонну сторінку під назвою searchform.php, яка включатиме тільки форму пошуку. За замовчуванням (тобто, коли ні searchform.php), ось що ми бачимо:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Я хотів би виділити кнопку та мітку та інструктувати користувача натиснути "Enter" для пошуку. Ми можемо зробити це, просто створивши шаблон searchform.php та додавши код. Ось файл у своєму повному вигляді:

<!--BEGIN #searchform-->
<form class="searchform" method="get" action="<?php bloginfo( 'url' ); ?>">
	<input class="search" name="s" onclick="this.value=''" type="text" value="Enter your search" tabindex="1" />
<!--END #searchform-->
</form>

10. Налаштування сторінки авторизації у WordPress

Є кілька способів для цього, в основному вони мають на увазі використання плагінів. Для початку, знайдемо спосіб налаштування логотипу (і URL логотипу) на сторінці авторизації через нашу власну тему. Налаштування URL логотипу проста. Просто додайте цей код у ваш файл functions.php:

add_filter('login_headerurl', 
	create_function(false,"return 'http://casabona.org';"));

Так само, як із частотою оновлення RSS віджету, ми комбінуємо add_filter () и create_function() для повернення іншої URL (в даному випадку, мою домашню сторінку) під час виклику зачіпки login_headerurl. Зміна логотипу — теоретично те саме, але вимагає трохи додаткової роботи:

add_action("login_head", "custom_login_logo");

function custom_login_logo() {
	echo "
	<style>
	body.login #login h1 a {
		background: url('".get_bloginfo('template_url')."/images/custom-logo.png') no-repeat scroll center top transparent;
		height: 313px;
		width: 313px;
	}
	</style%gt;
	";
}

Ви бачите, що у нас є зачіпка login_head та функція зворотного виклику custom_login_logo(), але замість add_filter (), ми використовуємо add_action ().Різниця між ними в тому, що add_filter () замінює певний текст або величину за умовчанням, тоді як add_action () призначена для виконання деякого коду в певний момент завантаження WordPress.

У нашій функції зворотного дзвінка ми перезаписуємо CSS за замовчуванням для логотипу (body.login #login h1 a) зображенням, яке ми завантажили до папки нашої теми. Переконайтеся, що ви підібрали потрібну висоту та ширину. У нас вийде щось на кшталт цього:

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

бонус: Зробіть вступну сторінку частиною вашої теми

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

Дотримуйтесь цих кроків:

1. Створіть новий файл під назвою page-splash.php (хоча ім'я не має значення) у папці вашої теми.
2. Додайте вашу HTML і CSS розмітку і все, що ще вам може знадобитися. Ідея в тому, що розмітка і CSS для вступної сторінки швидше за все відрізнятимуться від решти сайту.
3. вгорі page-splash.php, додайте наступний код, який повідомить WordPress, що це шаблон сторінки:
   
4. Додайте два теги, які зроблять сторінку WordPress. Десь у шапці (в ідеалі, поруч із ), додайте . Прямо перед тегом додайте . Збережіть!
5. Перейдіть в консоль WordPress і створіть сторінку, використовуючи цей шаблон:
   
6. Після того, як ви створили сторінку, перейдіть до Параметри → Читання, і під "На головній сторінці відображати" Виберіть пункт "Статичну сторінкуЗробіть першою сторінкою створену вами вступну сторінку!
   

Висновок

Ну ось! Більше 10 модифікацій, які ви можете зробити в WordPress, використовуючи зачіпки, функції та шаблонні сторінки. Тут перераховані зміни, які я використовую часто, але є ще безліч зачіпок для всього, починаючи з додавання класів body і закінчуючи зміною заголовків перед виведенням. Гнучкість та відсутність необхідності змінювати ядро ​​– це те, що робить WordPress такою чудовою платформою! А які ваші улюблені трюки? Повідомте нам у коментарях.

Джерело: SmashingMagazine.com

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

редактор wpcafe

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