Мы уже знаем, что WordPress считается самой популярной CMS в мире, и когда она объединяется с jQuery, она может творить чудеса. В этом уроке мы будем обсуждать один пример полезности jQuery в WordPress, создавая средство изменения размера текста внешнего интерфейса. Это руководство предназначено для начинающих, которые учатся внедрять магию jQuery в WordPress.
Что мы на самом деле собираемся создать
В этом уроке мы собираемся создать интерфейсное средство изменения размера текста, которое изменяет размер шрифта постов в соответствии с удобством читателя. Предположим, что вы в блоге читаете пост, и вам трудно пройтись по строкам поста из-за размера текста. Здесь возникает необходимость изменения размера текста, чтобы соответственно увеличить / уменьшить размер текста сообщения. Увеличение / уменьшение размера шрифта обычно рассматривается из-за ряда факторов, таких как:
- Чтобы настроить текст в соответствии с вашим разрешением экрана
- Чтобы изменить размер текста по умолчанию, показанный браузером
- Повысить ясность слов
- Более удобно, чем использование Ctrl + или Ctrl- в вашем браузере
- Для слабовидящих людей, которые не умеют читать мелкие шрифты
В этом уроке мы будем создавать две ссылки, A + и A- , во внешнем интерфейсе, которые соответственно с легкостью увеличат или уменьшат размер текста сообщения.
Шаг 1: Решите, какую часть изменить размер
Это самый важный шаг, на котором вы должны решить, какой элемент вы хотите связать с устройством изменения размера текста. Несмотря на то, что вы можете поместить средство изменения размера текста на самой домашней странице (индекс), рекомендуется поместить его на страницу single.php, которая будет использоваться при просмотре одного сообщения.
Чтобы сделать элемент изменяемого размера, мы должны обернуть эту часть, используя уникальный класс div. Поскольку мы используем тему Twenty Twelve , вот как выглядит наш файл « single.php » после добавления выделенного ниже кода, чтобы обернуть сообщение в классе « resize ».
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header();
<div id=»primary» class=»site-content»>
<div id=»content» role=»main»>
<div class=»resize»>
<?php while ( have_posts() ) : the_post();
<?php get_template_part( ‘content’, get_post_format() );
</div><!— #resize —>
<nav class=»nav-single»>
<h3 class=»assistive-text»><?php _e( ‘Post navigation’, ‘twentytwelve’ );
<span class=»nav-previous»><?php previous_post_link( ‘%link’, ‘<span class=»meta-nav»>’ . _x( ‘←’, ‘Previous post link’, ‘twentytwelve’ ) . ‘
<span class=»nav-next»><?php next_post_link( ‘%link’, ‘%title <span class=»meta-nav»>’ . _x( ‘→’, ‘Next post link’, ‘twentytwelve’ ) . ‘
</nav><!— .nav-single —>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || ‘0’ != get_comments_number() )
comments_template( », true );
?>
<?php endwhile;
</div><!— #content —>
</div><!— #primary —>
<?php get_sidebar();
<?php get_footer();
|
Здесь мы разместили класс div таким образом, чтобы он рассматривал только тело одного сообщения.
Для любого элемента в WordPress, для которого вы хотите изменить размер текста, просто поместите его в соответствующие классы div, которые будут использоваться с jQuery.
Шаг 2: Добавление ссылок для изменения размера текста
Следующим шагом является добавление двух ссылок на страницу, которые будут действовать как две кнопки для изменения размера текста. Вы можете разместить их в любом месте на вашей странице, но не размещайте их в цикле. Здесь мы поместили их в наш файл single.php и связали их с двумя уникальными идентификаторами.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header();
<div id=»primary» class=»site-content»>
<div id=»content» role=»main»>
<div class=»resize»>
<?php while ( have_posts() ) : the_post();
<?php get_template_part( ‘content’, get_post_format() );
</div><!— #resize —>
<nav class=»nav-single»>
<h3 class=»assistive-text»><?php _e( ‘Post navigation’, ‘twentytwelve’ );
<span class=»nav-previous»><?php previous_post_link( ‘%link’, ‘<span class=»meta-nav»>’ . _x( ‘←’, ‘Previous post link’, ‘twentytwelve’ ) . ‘
<span class=»nav-next»><?php next_post_link( ‘%link’, ‘%title <span class=»meta-nav»>’ . _x( ‘→’, ‘Next post link’, ‘twentytwelve’ ) . ‘
</nav><!— .nav-single —>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || ‘0’ != get_comments_number() )
comments_template( », true );
?>
<?php endwhile;
</div><!— #content —>
</div><!— #primary —>
<p><a id=»increase-font» href=»#»>[ A+ ] </a>/<a id=»decrease-font» href=»#»>[ A- ] </a> </p>
<?php get_sidebar();
<?php get_footer();
|
Шаг 3: Добавление волшебства jQuery
Теперь пришло время добавить магию jQuery к нашей теме, чтобы сделать две ссылки увеличения / уменьшения. В папке js вашей темы создайте файл JavaScript с именем resize.js . Теперь откройте файл и добавьте следующий фрагмент кода. Код четко объяснен с помощью комментариев.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
// This prevents the execution of the code before the document is finished loading.
jQuery(document).ready(function() {
// The ‘A+’ element in the page is associated with the jQuery click() event.
jQuery(‘#increase-font’).click(function(event) {
// This prevents the default action of the click() event from being triggered.
event.preventDefault();
// The jQuery each() event interates over each elements belonging to the ‘resize’ class
jQuery(‘.resize’).each(function() {
// Call to a custom function to increase the text size
changeTextSize(this, change);
});
});
// The ‘A-‘ element in the page is associated with the jQuery click() event.
jQuery(‘#decrease-font’).click(function(event) {
// This prevents the default action of the click() event from being triggered.
event.preventDefault();
// The jQuery each() event interates over each elements belonging to the ‘resize’ class
jQuery(‘.resize’).each(function() {
// Call to a custom function to decrease the text size
changeTextSize(this, -change);
});
});
});
// Three variables have been used to define range of the text size and the increment/decrement value respectively.
var min = 8, max = 100, change = 2;
// Defines a custom function with two parameters determining the element to be resized and the size
function changeTextSize(element, value) {
var currentSize = parseFloat(jQuery(element).css(‘font-size’));
var newSize = currentSize + value;
if (newSize <= max && newSize >= min) {
jQuery(element).css(‘font-size’, newSize + ‘px’);
}
}
|
Если вы хотите узнать больше о jQuery, пожалуйста, ознакомьтесь с серией уроков Learn jQuery in 30 Days от Jeffrey Way.
Шаг 4: Ссылка на скрипт в WordPress
Это последний шаг, в котором нам нужно добавить ссылку на скрипт resize.js в WordPress, чтобы он выполнял код. По умолчанию установка WordPress уже содержит библиотеку jQuery. Нам просто нужно сослаться на скрипт в теме. Откройте файл functions.php и добавьте следующий фрагмент кода.
|
1
2
3
4
5
|
function wptuts_resize_text () {
// The array(‘jquery’) is used to create dependency on the jQuery library in order to use it properly.
wp_enqueue_script( ‘resize’, get_template_directory_uri() . ‘/js/resize.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_resize_text’ );
|
Вот и все. Теперь, если вы просматриваете сообщение, вы можете увеличивать или уменьшать размер шрифта сообщения, используя ссылки A + и A- на странице. Вы можете использовать свой собственный CSS, чтобы правильно стилизовать и разместить две ссылки на своем веб-сайте по своему усмотрению.