Ми вже знаємо, що WordPress вважається однією з найпопулярніших CMS в світі, і якщо доповнити цю популярність функціональністю jQuery. то може вийти поєднання, здатне творити справжні чудеса. У цьому практичному керівництві мова піде про те, як застосувати користь від jQuery в роботі WordPress, створивши front-end додаток для зміни розмірів текстового поля в постах. Ця публікація - для новачків, які тільки освоюють магічні властивості jQuery під WordPress.
Що, власне, ми збираємося зробити
Як ми вже сказали, наше завдання - написати front-end рішення для зміни розмірів шрифту в постах для зручності читачів. Уявіть, що ви читаєте пост в блозі, який здався вам не дуже зручним для прочитання великого масиву тексту через занадто дрібний шрифт. І ось тут виникає потреба зручно збільшити або зменшити шрифт так, щоб при цьому і сама структура поста збереглася. Збільшення / зменшення шрифту в розмірі визначається набором наступних чинників і інструментів, які можна використовувати для цієї мети:
У цьому керівництві ми створимо дві посилання для контролю розмірів тексту в постах: A + і A-. Вони будуть збільшувати або зменшувати розміри тексту в постах в залежності від потреб користувача.
Крок 1. Вирішіть, яку частину змінювати в розмірі
Це один з важливих кроків у розробці нашого рішення. На цьому етапі ви повинні вирішити, що саме ви збираєтеся пов'язати з процедурою зміни розмірів тексту в постах. Ви, звичайно, можете пов'язати зміна розмірів тексту з головною сторінкою за замовчуванням, але розумніше прив'язати його до сторінці single.php. що дасть вам можливість коригувати розміри тексту для кожного окремо взятого поста.
Щоб наш елемент міг змінювати розміри, ми повинні обробити код за допомогою класу div. У нашому прикладі для розробки ми використовуємо тему Twenty Twelve. і ось як буде виглядати наш файл single.php після додавання в нього коду, який виділений нижче, для того, щоб вставити його правильно в пост в рамках класу 'resize':
Для будь-якого елементу в WordPress, для якого ви хочете змінювати розміри тексту, просто вставте відповідні класи div. які будуть застосовуватися для роботи jQuery.
Крок 2. Додаємо посилання для зміни розмірів тексту
Наступний крок - це додавання двох посилань на сторінці, які будуть працювати як 2 кнопки для зміни розмірів тексту. Ці посилання можна помістити де завгодно на сторінці, але уникайте приміщення цих посилань в циклі. Ми помістили ці посилання в файл single.php і зв'язали їх з двома унікальними ID.
Крок 3. Трохи jQuery-магії
Якщо ви хочете дізнатися більше про jQuery. почитайте пости серії Learn jQuery in 30 Days від Джеффрі Вей.
Крок 4. Зв'язуємо скрипт з роботою WordPress
Джерело: WP.tutsplus.com
Спасибі, все відмінно працює. Питання - а що потрібно змінити в JS коді, щоб посилання змінювали не розмір шрифту, а висоту рядка (line-height), на зразок пробував підставляти значення "line-height" замість "font-size", але не працює?)))
А як зробити щоб запам'ятовувати вибрані збільшення, що не підкажіть?
Попередньому ораторові - це цілком нормальна функція і joomla тут ні до чого. Воно треба, наприклад, для людей з вадами зору.