Главная » Створення сайтів » Wordpress » Як створити свою тему wordpress. Созданіе простий Wordpress теми

Як створити свою тему wordpress. Созданіе простий Wordpress теми

Як створити свою тему wordpress. Созданіе простий Wordpress теми

У цьому уроці ми створимо просту тему для cвоего блогу wordpress самостійно.

Перш ніж почати, давайте поглянемо на стандартну тему (тему за замовчуванням, файли index. Php і single. Php) WordPress і подивимося як вона влаштована:

Як створити свою тему wordpress. Созданіе простий Wordpress теми

Вихідний шаблон.

Припустимо, що ми намалювали в фотошопі ось такий шаблон (його исходник тут), аналогічно поділимо його на блоки:

Як створити свою тему wordpress. Созданіе простий Wordpress теми

Сам процес створення і верстки html-шаблону розглядати в рамках цієї статті не буде, ви можете подивитися відеокурс "Створюємо сайт з нуля (фотошоп + верстка)" на сайті evgeniypopov. com в випусках журналу 35 і 36. тільки слід врахувати, що вордпресс генерує деякі класи, які повинні бути присутніми в таблиці стилів. Наприклад класи Aligncenter, alignleft і alignright служать для вирівнювання зображень і блокових елементів, і їх потрібно включити в свою таблицю стилів (можна скопіювати з таблиці стилів дефолтной теми):

Наступні класи використовуються для вирівнювання зображень, які мають підписи (можна скопіювати з дефолтной теми, в подальшому при необхідності поправити):

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

У процесі верстки використовуйте блоки і стилі до них, як це визначено в скронях на початку статті. Це не обов'язково, але дуже навіть бажано.

Наприклад надалі ми підключимо пошукову форму на сайт через спец. тег wordpress <? php get_search_form ()?> . в результаті чого wordpress виведе таку форму:

Тому враховуємо це при верстки теми.

І останнє, що потрібно додати в style. css це інформацію про себе коханого і про створеній темі. Інформація розміщується на початку файлу в коментах:

Також не забудьте зробити Screenshot. png і покласти його в папку з шаблоном (в корінь). Інформація, розміщена таким чином в таблиці стилів, буде відображатися в адмінці в розділі Управління «темами» . Зверстаний шаблон тестуємо в браузерах, якщо все норм, можна йти далі.

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

Отже розпакуйте архів, далі ми будемо конвертувати Index. html, single. html і page. html в wordpress тему (page. html така ж як і single. html, тільки без блоку коментарів).

Принцип роботи wp-теми :

Як створити свою тему wordpress. Созданіе простий Wordpress теми

Якщо ви відкриєте папку теми за замовчуванням (wp-content / themes / default), ви побачите безліч файлів PHP (файли теми) і одного файлу style. css. Коли ми переглядаємо блог, WP підключає файли теми (index. Php << header. Php, sidebar. Php і footer. Php) для створення сторінок.

На цьому попередня підготовка закінчена і ми можемо перейти до створення теми з наявного вихідного матеріалу.

Для початку в директорії тим вордпресс (wp-content / themes) створіть папку з ім'ям нашої теми. Нехай це буде Ruseller_lessons . Потім з папки теми за замовчуванням (wp-content / themes / default) скопіюйте файли Comments. php, search. php і 404.php в папку нашої теми. Ці файли відповідають за коментарі та пошук на блозі. Потім в Ruseller_lessons скопіюйте таблицю стилів Style. css нашого шаблону, Screenshot. png (300x225) і папку Images .

Тепер файли нашого шаблону потрібно "розпиляти", т. Е. Витягнути в окремі файли footer, sidebar і header. Схема показує спрощений вид файлу Index. php з мітками, згідно з якими будемо його пиляти:

Як створити свою тему wordpress. Созданіе простий Wordpress теми

Відкриваємо Index. html і вирізаємо все, що знаходиться до коментаря <! - / header ->. створюємо новий файл Header. php і вставляємо в нього вирізаний код, зберігаємо в директорії нашої теми Ruseller_lessons :

Тепер йдемо в папку з дефолтной темою, відкриваємо Header. php і копіюємо звідти теги <title>, <link>, <h1>, and <div class = description> і ними замінити відповідні рядки в нашому Header. php .

Потім все теги <li>, що знаходяться Id = "nav" (список сторінок у верхній частині блогу) замінити на функцію вордпресс

<? Php wp_list_pages ( 'sort_column = menu_order & depth = 1 & title_li =');?>

В результаті отримуємо:

Крок 3 - Sidebar. php

Возращаться до файлу index. htm. Насамперед видаляємо всю форму пошуку, потім вирізаємо з нього все від <div id = "sidebar"> до <! - / Sidebar -> . Вирізаний код вставляємо в новий файл Sidebar. php і зберігаємо його в директорії нашої теми. Тепер в отриманому коді замінюємо всі, що між тегами <ul> викликом сайдбарі, отримуємо наступний код:

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

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

Щоб наші сайдбарі заробили, їх необхідно зареєструвати. Для цього в директорії теми створюємо файл Functions. php і в ньому пишемо:

Залишилося підключити форму пошуку. Зробити це можна або з адмінки шляхом добаленія віджета в один з сайдбарі, а можна викликати її в Sidebar. php . що ми і зробимо. На самому початку додаємо:

Крок 4 - Footer. php

Возращаться до файлу index. html і вирізаємо з нього все від <div id = footer> до </ html> . Вирізаний код вставляємо в новий файл Footer. php :

На нашу шаблоном тут же ми повинні вивести останні записи блогу (Recent Posts) і останні коментарі (Recent Comments). Останні записи будемо виводити в кількості 5 штук - Showposts = 5 . Замінити всі всередині <ul class = "recent-posts"> :

Виведення останніх коментарів зробимо за допомогою плагіна simple_recent_comments. php. скачайте його і покладіть в папку нашої теми. Тепер в потрібному місці його нам потрібно викликати (замінити вміст блоку <div class = "left-col"> ):

Крок 5 - Index. php

Все що залишилося в Index. html зберігаємо як Index. php в папку з нашою темою, потім підключаємо виклик Header . Sidebar і footer :

Крок 6 - Висновок записів блогу на сторінці index. php

Наступний малюнок демонструє принцип виведення записів блогу. Спочатку йде перевірка, чи є повідомлення в базі, якщо немає виводить "Not Found". Якщо є, виводить в циклі While

. Як створити свою тему wordpress. Созданіе простий Wordpress теми

Відкриваємо наш index. php і замінити статичний текст між <div id = content> .. </ div> функціями (тегами) wordpresspost Date, title, category, comments, next і previous . Орієнтуючись на малюнок вище отримуємо:

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

Ми використовували Теги Wordpress:

The_time ( 'M'), the_time ( 'j') - висновок місяці і дні відповідно

The_permalink () - відображає постійне посилання записи

The_title_attribute () - заголовок поточної записи.

The_title () - заголовок запису або сторінки

The_category ( ',') - посилання на категорію або категорії, до яких належить запис

Comments_popup_link - виведе посилання для коментарів у спливаючому вікні якщо comments_ popup_script () використовується, інакше виводить звичайне посилання на коментарі.

The_content - виводить вміст поточного запису. Якщо використовується тег <! - More-> то повідомлення показується тільки до <! - More-> (тільки на головній сторінці, на сторінці записи буде показуватися повністю).

Next_posts_link - посилання на попередні повідомлення.

Previous_posts_link - посилання на наступні повідомлення.

Крок 7- Single. php

Цей файл ми створимо з тільки що закінченого Index. php . трохи змінивши його:

Wp_link_pages - Виводить посилання на сторінці в багатосторінковому повідомленні (при використанні <! - Nextpage ->).

Comments_template () - Включає файл шаблону Comments. php з поточної папки теми

Previous_post_link ( '% link'), next_post_link ( '% link') - виведе заголовки попередньої та наступної записи

Крок 8 - page. php

Цей крок простіше попереднього. Файл Single. php зберігаємо як Page. php . Видаляємо з Page. php висновок дати, коменти, next / previous:

На цьому можна і закінчити. Основні файли теми ми зібрали. Ймовірно ви помітили, що в дефолтной темі більше файлів. Наприклад Archive. php . він не є обов'язковим. Однак якщо ми підключимо віджет "Архіви" або "Календар" в сайдбарі і перейдемо в якій - небудь архів за датою, записи за обраною датою виведуться На контрольному аркуші . тому цілком можна обійтися без Archive. php :)

Іноді потрібно / корисно вивести на сторінці заголовки всіх записів. Для цієї мети скористаємося тегом wordpress Query_post :

Query_posts ( 'showposts = -1'); - виведе всі записи. Збережемо це в файл Archives. php . Зверніть увагу на коментарі в початку коду Template Name: Archives . він тут обов'язковий (далі ви зрозумієте чому)

Йдемо в адмінку і створюємо нову сторінку. Вказуємо тільки заголовок і вказуємо в "атрибутах" шаблон Archives . зберігаємо сторінку. І тепер на цій сторінці у нас будуть виводитися всі записи за шаблоном Archives. php . який ми описали трохи вище:

Як створити свою тему wordpress. Созданіе простий Wordpress теми

На сьогодні це все. Дякуємо за увагу.

P. S зібрана тема тестувалася на WordPress 2.8.5. Кінцевий результат скачати можна тут. Аналогічно спробуйте створити свою тему, впевнений, у вас вийде!

Стаття збірна, джерела: http: // www. webdesignerwall. com, http: // themetation. com, http: // codex. wordpress. org

Даний урок підготовлений для вас командою сайту ruseller. com