Привіт, сьогодні спробуємо переробити стандартну тему wordpress - Twenty Twelve: задамо розмір мініатюрі, помістимо мініатюру під заголовок, видалимо непотрібні мета теги на головній сторінці, відредагуємо кнопку «Читати далі», видалимо посилання в підвалі.
Завантажити вихідні для статті можна нижче
Стандартні теми wordpress: Twenty Eleven, Twenty Twelve, Twenty Ten, Twenty Thirteen, Twenty Fourteen - є відмінним framework (фреймворк. Структура, каркас), на основі яких кожен день створюються нові, багатофункціональні wordpress теми.
Спочатку стандартна тема wordpress - Twenty Twelve (версія 1.3) виглядає так:
Приступимо до її виправлення:
1. Задамо розмір мініатюри (thumbnail).
Чомусь розмір мініатюри не обмежений - що дуже не зручно, так як при завантаженні картинок різного розміру - мініатюри також будуть різними.
Для цього заходимо в панель управління сайтом на wordpress, в лівому меню вибираємо пункт «Зовнішній вигляд» і його підпункт «Редакор», праворуч у списку шаблонів вибираємо файл functions.php (Функції теми) і шукаємо в його коді наступний рядок:
Саме вона і задає розмір мініатюри в темі Twenty Twelve (621 - це ширина, а 9999 - це висота мініатюри в px), давайте наприклад виправимо її на наступну сходинку:
І у нас повинно вийти наступне:
2. Перемістимо мініатюру під заголовок.
Для цього заходимо в панель управління сайтом на wordpress, в лівому меню вибираємо пункт «Зовнішній вигляд» і його підпункт «Редакор», праворуч у списку шаблонів вибираємо файл content.php і шукаємо в його коді наступний рядок:
Дана точки відповідає за відображення мініатюри.
Її перенесемо трохи нижче за Сточки:
Також обгорнемо код виведення мініатюри в окремий блок і пропишемо до нього стилі оформлення - для того, щоб зробити відступ від заголовка зверху, в результаті повинно вийти наступне:
Тобто ми обернули код виведення мініатюри в блок з id «tumba».
Для блоку tumba пропишемо наступний код у файлі стилів - style.css - відкриваємо його: заходимо в панель управління сайтом на wordpress, в лівому меню вибираємо пункт «Зовнішній вигляд» і його підпункт «Редакор», праворуч у списку шаблонів вибираємо файл style.css і в самий його низ вставляємо наступний код:
Тобто ми створили відступ в 30px зверху.
В результаті у нас вийде наступне:
3. Вилучимо непотрібні мета теги.
Знову повертаємося до файлу content.php - для цього заходимо в панель управління сайтом на wordpress, в лівому меню вибираємо пункт «Зовнішній вигляд» і його підпункт «Редакор», праворуч у списку шаблонів вибираємо файл content.php і видаляємо в ньому такі рядки:
У підсумку ваш файл content.php повинен виглядати так:
Після чого сайт буде виглядати вже так:
Як бачите нічого зайвого.
4. Відредагуємо кнопку «Читати далі».
Для цього достатньо знову перейти в файл стилів - style.css і додати в самий низ його коду наступні рядки:
До кнопці «Читати далі» можна також прописати фонове зображення за допомогою наступної точки:
А для того, щоб кнопка «Читати далі» відображалася справа, а не зліва можна вставити наступний код:
В результаті у нас вийшло наступне:
5. Вилучимо посилання в підвалі.
В результаті файл footer.php буде виглядати так:
А після видалення цього рядка так:
і замість нього вставляємо наступний код:
7. Додаємо посторінкову навігацію.
Встановлюємо плагін WP-PageNavi - він є в офіційному репозиторії wordpress, тому установка стандартна - через панель управління (админка) wordpress:
Кількість скачувань плагіна: 4,938,430 - величезна кількість
Сторінка плагіна в репозиторії: «wordpress.org/plugins/wp-pagenavi/»
І замінюємо їх на наступні:
Все після цього наша посторінкова навігація запрацює!
8. Переміщаємо сайдбар справа наліво.
Для цього вам достатньо додати в файл стилів - style.css наступний код:
Тут знадобитися невелика настройка ...
Візьмемо для прикладу стандартну тему wordpress - Twenty Twelve (скачати можна тут), а версія движка wordpress на прикладі буде 4.1.
9.1. Встановлюємо і активуємо плагін WP-CommentNavi через панель управління wordpress: Адаменко - Пункт «Модулі» - підпункт «Додати новий» - в рядок «Пошук плагінів» вводимо WP-CommentNavi.
Видаляємо вищевказані рядки коду, укладені в теги «nav» і замість нього вставляємо наступний код:
Ось код після зміни:
Після чого заходимо на сайт і дивимося - що вийшло:
Тут бачимо, що за посилання відповідає код:
В результаті у вас вийде наступне:
11. Переносимо головне меню під зображення заголовка (картинку в шапці).
Вирізаємо його і переносимо під код виведення зображення заголовка.
За виведення зображення заголовка відповідає наступний код:
У результаті повинно вийти так:
12. Редагуємо відступи в темі Twenty Twelve:
Питання: як управляти відступами між анонсами постів на сторінці? Після видалення мета залишилося зайве місце ...
Щоб редагувати відступи - можна скористатися інструментами для розробників, вбудованими в усі сучасні браузери. Так, наприклад, в яндекс.браузер і Google Chrome, щоб викликати дані інструменти потрібно натиснути правою кнопкою миші на сторінці сайту і вибрати в списку, що випадає пункт «Подивитися код елемента»:
У вас з'явитися віконце «Developer Tools» ( «Інструменти розробника»), тут вибираємо інструмент «лупа» (зліва вгорі), далі наводимо на потрібний нам елемент і дивимося його код - його можна редагувати і дивитися, що змінитися (по скриншоту нижче можна клікнути, щоб збільшити):
В результаті бачимо, що за відступи відповідає клас «.site-content article».
У нашому випадку за відступ відповідає наступний код:
Нам важливі властивості margin-bottom і padding-bottom - тут вони задані в двох одиницях виміру - в «px» і в «rem», чим вони відрізняються?
«Px» - це абсолютна одиниця виміру, а «em» - відносна.
«Rem» - розмір щодо базового (визначеного в .html<>) Розміру шрифту. По ідеї повинен бути більш дружелюбним до мобільних пристроями і ресайз.
За одиницях виміру можна почитати статтю тут:
«Web-standards.ru/articles/boring-bits-of-css/»
За замовчуванням, якщо нічого не робити, 1rem = 16px.
Після коригування відступу мені сподобався ось цей варіант:
PS: Завантажити перероблену тему Twenty Twelve (версія 1.3) - можете з мого сайту - завантажити Twenty Twelve (виправлено mnogoblog.ru).
Схожі записи:
- Як створити новий файл теми wordpress (без ftp доступу)
- Як за допомогою PHP створити, перейменувати, видалити файл
- Twenty Fifteen: додаємо меню в підвалі сайту
- Плаваюча кнопка на сайті збоку
- Прикрашаємо сайт - додамо блоки з зображеннями ...
- Налаштовуємо шапку в Twenty Ten, Twenty Eleven
Навігація по публікаціям
Добридень! А чи не підкажіть як оптимізувати теги h1 т.к їх кількість збільшується з розміщенням кожної нової статті а так само як ссделать що б на головній сторінці був аноyс а не повністю статті?
Спасибі за пост, багато корисного дізнався.
А як зробити щоб відображалося назва рубрики на сторінці записи, просто коли я видаляю по вашій рекомендації мета дані, то немає назв рубрики нема на сторінці «рубрики" не на сторінці самого поста.
Добрий день. Дуже корисний матеріал. Але у мене питання: як в цій темі в рубриках взагалі прибрати посилання «читати далі»? Щоб в запис можна було перейти тільки через посилання в заголовку анонса?
Сергій, щоб прибрати посилання «читати далі», досить у файлі стилів (style.css) додати наступний код:
Володимир, спасибі за корисну пораду - додав пункт 8 - про те як перемістити сайдбар зліва направо.
За створення двох сайдбарі з боків - доведеться написати нову статтю ...
як зменшити ширину шаблону Twenty Twelve
спасибі за опис як видалити посилання з підвалу на вордпресс орг.
Дякую за корисну інформацію. А як зробити щоб текст обтікав мініатюру з правого боку?
У порівнянні з іншими питаннями, мій досить дурний)
Але, як встановити Вашу перероблену тему? Видається помилка, через вже наявний теми. міняв назву, все одно видає помилку.
Вітаю! Підкажіть будь ласка, а як можна в цій темі перемістити віконце і кнопку «пошук» з сайтбара в рядок «меню» (так, як сталось між вами)?
Заздалегідь дякую.
Вітаю!
Допоможіть будь ласка видалити посилання «змінити» внизу сторінки в темі Twenty Thirteen, а також підняти вище контент із зображенням фото на сторінці в тій же темі. Заздалегідь дякую.
Олександр, відповів на вас питання в пункті 10.
Здрастуйте!
Підкажіть як меню - головна, всі статті, зробити під шапкою (картинкою).
Тема TwentyTwelve 1.6
Pavel, відповідь на ваше запитання перебувати в пункті 11 цієї статті, спасибі за запитання!
Ксенія, спасибі за запитання, відповів на нього в новому пункті 12 цієї статті!
Добрий день. Костянтин!
Дуже корисна для мене інформація. Вдало зайшов.
Не підкажете як зробити меню на всю сторінку (по довжині)?
І може підкажіть як перемістити, заголовок сайту (текст), в праву частину. Як правильно це все прописати і куди?
Заздалегідь дякую. Михайло.