Урок за WordPress: Как да създадете WordPress тема от HTML (част 2)

  1. 1. Урок за WordPress: Как да създадете WordPress тема от HTML (част 1)
  2. 2. В момента четете: Урок за WordPress: Как да създадете WordPress тема от HTML (част 2)
  3. 3. Въведение в анатомията на WordPress тема

В първа част от този урок разгледахме основите на конвертирането на HTML шаблон в тема на WordPress. Ако сте най-малките любопитни, научихме няколко неща за разделянето на HTML шаблони в PHP файлове, поставянето им отново заедно, стилизирането и именуването на теми на WordPress. Наистина научихме много неща и вие ще искате да се запознаете с концепциите, които разгледахме в първия ни урок, за да се насладите на това второ сервиране. В днешната публикация ще направим нещата доста по-високи. Ще покрием още няколко области, за да можете да създадете напълно функционална тема на WordPress. И така, без допълнително обожание, ето.


Конфигуриране на изображения и JavaScript файлове

Ако имате изображения в оригиналния си HTML шаблон (index.html), вероятно сте забелязали, че са спрели да се показват, след като изрязват шаблона във PHP файлове. В никакъв случай не се притеснявайте, просто е такъв, какъвто е PHP. Например, ако имате лого в секцията на заглавката си така…

your_logo_alt_text

… ще трябва да си поиграете малко с кода. Кодът, който ще разкрия след малко, ще помогне на браузърите да намерят вашето лого (или всяко друго изображение) във вашето снимки папка, която е (или трябва да бъде) подпапка на основната директория на вашата тема. Така че, за да покажете логото си в секцията на заглавката, отворете файла header.php и заменете горния код със следното:

your_logo_alt_text

Функцията get_template_directory_uri () връща URL адреса за вашата директория с теми. Така че ако добавите вашето лого в папка с изображения, тогава кодът ще го вземе.

Забелязвате някаква разлика? Очевидно това парче код ще коригира само вашето лого. За да коригирате други изображения, ще трябва да пренапишете кодовете им по подобен начин. Лесни грах неща.

Нека преминем към JavaScript. Ако вашият HTML уебсайт използва JavaScript, създайте папка с име JS и поставете вашите скриптове там. Можете да ги извикате във файла header.php, като използвате следния код:

Горният код използва example.js като илюстрация. Не забравяйте да замените тази част с името на вашия JavaScript файл.

Разбира се, ако създавате тема за някой друг, тогава наистина трябва да заредите вашите js файлове с wp_enqueue_scripts. Проверете публикациите на AJ относно добавянето на JavaScript към теми на WordPress за повече информация и съвети.

Файлове с шаблони

В първа част от този урок, ние споменахме четири основни файла с шаблони index.php, header.php, sidebar.php и footer.php. Файловете с шаблони контролират как ще се показва уебсайтът ви в мрежата. Шаблоните получават информация от MySQL базата данни на WordPress и я превеждат в HTML код, който се показва в уеб браузърите. С други думи, шаблонните файлове са градивните елементи на темите на WordPress. За да разберем по-добре шаблоните, нека се задълбочим в концепция, известна като шаблон йерархия.

Ще използваме аналогия. Ако посетител кликне върху връзка към категория (т.е. връзка към категория), като например http://www.yoursite.com/blog/category/your-category/, WordPress използва йерархията на шаблоните, за да генерира правилния файл (и съдържание) като обяснено по-долу:

  • Първо, WordPress ще потърси файл с шаблон, който съответства на идентификатора на категорията
  • Ако идентификаторът на категорията е например 2, WordPress ще потърси файл с шаблони, наречен категория-2.php
  • Ако категория-2.php не е налична, WordPress ще предложи файл с общ шаблон на шаблона, като category.php
  • Ако този файл с шаблони също не е наличен, WordPress ще потърси общ шаблон за архив, като archive.php
  • Ако шаблонът за общ архив не съществува, WordPress ще се върне върху основния файл на шаблон, index.php

Ето как работят шаблоните на WordPress и можете да използвате тези файлове, за да персонализирате темата си за WordPress според вашите нужди. Другите шаблонови файлове включват:

home.php или index.phpИзползва се за изобразяване на индекса на публикациите в блога
предно page.phpИзползва се за изобразяване на статични страници или последни публикации, както е зададено на дисплеите на първа страница
single.phpИзползва се за изобразяване на една страница с публикации
едно- {след тип} .phpИзползва се за изобразяване на потребителски типове публикации, напр. ако пост-типът е продукт, WordPress ще използва single-product.php
page.phpИзползва се за изобразяване на статични страници
категория.php или archive.phpИзползва се за изобразяване на индекс Архив на категориите
author.phpИзползва се за изобразяване на автора
date.phpИзползва се за изобразяване на дата
search.phpИзползва се за изобразяване на резултатите от търсенето
404.phpИзползва се за визуализация на страница 404 за грешка на сървъра

Това е само кратък списък, има и много други WordPress шаблони. Темата за шаблоните е голяма и най-добрият начин да научите как да играете с файлове с шаблони е като прочетете обширните Разработване на теми библиотека в WordPress. Като алтернатива можете да прочетете по-краткото Секция за шаблони в WordPress Codex.

Тагове за шаблони

Виждайки, че току-що въведохме шаблонови файлове, честно е само да споменем нещо или две за шаблонните маркери и ролята, която те играят в темите на WordPress. Според WordPress.org, „… маркерите на шаблони се използват в шаблона на блога ви, за да показват динамично информацията или да персонализирате по друг начин блога си, предоставяйки инструментите, за да го направите толкова индивидуален и интересен, колкото сте.“

В предишния ни урок се запознахте с няколко маркера на шаблони като get_header, get_sidebar, get_footer и bloginfo. В следващия раздел ще добавим няколко маркера за шаблон към новосъздадената ни тема на WordPress. Предполагам, че вече сте включили декларацията DOCTYPE във файла header.php. Ако нямате, ето кода:

Декларацията DOCTYPE дава значение на вашия HTML код. Като избягваме това, нека променим началния HTML таг. Ще включим lang атрибут с помощта на language_attributes маркер така:

Горният код ще генерира следното:

С наличието на декларация DOCTYPE и маркера language_attribute структурата на вашата тема е законна и браузърите ще разберат кода ви. Ако създавате тема за блог, важно е да поставите връзки към вашия pingback URL и RSS емисия в главата си. В своя header.php добавете следния код:

Забелязахте ли как работихме с тагове за блог инфо да включите RSS емисиите („rss2_url“) и pingback („pingback_url“)? Преди да запазите своя header.php файл, добавете и следния код:

Горният маркер wp_head ще изтегли таблици със стилове и JavaScript файлове, изисквани от вашите приставки. Ако оставите това малко парче код, възможно е вашите плъгини да не работят по желание. Като изключим това, нека добавим заглавия на страниците към нашата тема на WordPress, използвайки – за пореден път – маркера bloginfo. Във вашия header.php файл добавете следния код:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Първият маркер wp_title ще добави заглавието на вашата страница или публикация и втория таг bloginfo („име“) ще добавите името на вашия блог. Сега, когато вашата тема на WordPress има заглавия на страници, какво ще кажете за създаването на екранна снимка за нашата тема, преопаковане на темата и почивка?

Създаване на екранна снимка за вашата тема

Когато качихте тестовата си тема за първи път, сигурно сте забелязали, че в тематичния панел на WordPress липсва екранна снимка. Изглеждаше невероятно, особено ако имате други теми с цветни скрийншоти. Но не се притеснявайте, създаването на екранна снимка за вашата тема е много лесно. Просто създайте изображение, като използвате любимия си редактор на изображения (например Adobe Photoshop) или вземете екранна тема на вашата тема. Уверете се, че вашето изображение е с ширина 600px и височина 450px. Запазете изображението като screenshot.png във вашата папка с теми. Запазете всички промени, компресирайте папката с теми в ZIP архив. Качете темата и я активирайте, за да видите новите си промени ��

заключение

Искам да повярвам, че този втори урок ви предложи по-задълбочен поглед върху създаването на тема на WordPress от статичен HTML. В близко бъдеще ще ви запозная с други аспекти на тематизирането на WordPress, но междувременно подготвих следните ресурси само за вас:

Щастливо създаване!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map