Въведение в анатомията на WordPress тема

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

Преди малко ви представихме концепцията за създаване на тема на WordPress от HTML. Разделихме урока на две части и днес всички сме за очертаване на двете уроци, така че не се колебайте да гледате на този пост като на трета поща в поредицата от публикации. Моята цел е да разделя темата на WordPress, за да ви дам ясна представа как тя (темата) работи.


Тази публикация предполага, че имате добре познаване на HTML и CSS. Ще продължа напред и ще заявя, че наличието на HTML и CSS умения е задължително условие при проектирането на WordPress теми. И още нещо, тази публикация ще остане настрана от големите думи и трудните понятия – ще бъде лесна за разбиране, така че бъдете готови да се забавлявате и да се учите.

Малко HTML грундиране

Всяка HTML уеб страница е разделена на различни части с помощта на

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

След като разполагате със своята уеб страница в секции, можете да поръчате (или подредите) секциите, както желаете, като използвате CSS. Този процес е известен като стайлинг и включва добавяне на други стилови елементи като цвят, размер, рамки, специални ефекти и др. Такава е силата на CSS, която – между другото – е кратка за Cascading Style Sheets. Когато сложите вашите HTMl и CSS файлове заедно и хвърлите няколко изображения, вие получавате пълен уебсайт.

Нещата не са много различни с темите на WordPress. Както видяхме в част 1 от Как да създадете WordPress тема от HTML, темите на WordPress са разделени на различни файлове. Ако не можете да забележите някакво сходство в този момент, позволете ми да обясня.

Статичните HTML уеб страници се разделят на разделения (това, което нарекохме секции по-рано), използвайки

тагове (или таблици, ако сте наистина старо училище). От друга страна, темите на WordPress се разделят на различни php файлове, които след това се събират отново с помощта на шаблонни маркери.

Следователно, вместо всички елементи на тялото (заглавие, основно съдържание, странична лента, долен колонтитул и т.н.) да живеят в един файл (какъвто е случаят със статичния HTML), всеки от елементите на тялото (в теми на WordPress) живее в отделни файлове.

И така, заглавката ще живее в header.php, страничната лента ще намери дом в Sidebar.php, основното съдържание ще бъде в index.php, или single.php (ако е пост) или page.php (ако е страница ). Разделът на долния колонтитул ще живее във footer.php и така нататък.

Следите ли? Вижте илюстрацията по-долу:

HTML-WordPress = конструкция

От нашата илюстрация по-горе, , и се наричат ​​шаблонни маркери. Тяхната работа е да изваждат header.php, sidebar.php и footer.php в този ред от вашата тема директория и да показват съдържанието в своя index.php, като по този начин завършват уеб страницата.

Не позволявайте .PHP разширение ви плаши, съдържанието във php файловете е само HTML код, с който сте запознати. Например, header.php може да съдържа типична навигация в списъка с HTML. По подобен начин можете да поставите типичен HTML код във footer.php, sidebar.php и index.php.

Можете също да поставите loop.php функция във вашия index.php (или където и да ви харесва), за да показвате публикациите в блога си, но трябва да забавя скоростта и да се върна към анатомията на темите на WordPress. Споменах нещо или две за цикъла в част 2 за това как да създадете WordPress тема от HTML. и ние ще говорим за него (цикъла) и други функции в бъдеще.

Преместване на…

Основна тема на WordPress се състои от най-малко четири шаблона, а именно:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Нека да видим какво влиза във всяко от тях магически файлове:

Файл на шаблона Index.php

Това е основният файл, без който нямате работеща тема на WordPress. Това е първият (или по подразбиране) файл, който се зарежда, когато посетите уебсайт на WordPress. Считайте го за еквивалент на index.html.

Типичният index.php в WordPress теми ще изглежда така:





Можете да добавите цикъла между и за показване на публикации в блога на началната страница (index.php), както е показано по-долу:




Файл на шаблона Header.php

Файловете с шаблони съдържат вашия заглавен код, навигация и HTML код на главата. По принцип header.php съхранява всичко, което искате да покажете в горната част на уебсайта си. Знаете, неща като заглавието на вашия уебсайт и подобни неща.

Вие също свързвате своя CSS таблица стилове в header.php. Ето основен пример за header.php:





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







Това е заглавната част. Поставете тук вашето лого и други подробности.

Файл на шаблона Sidebar.php

Sidebar.php съдържа всичко, което трябва да се появи на страничната ви лента (и). Страничната лента съдържа допълнителни менюта, джаджи, категории, икони на социални медии, персонализирано съдържание, HTML код, като реклами и т.н..

Sidebar.php може да съдържа чисто HTML маркиране или обаждания от функция php в зависимост от вашите нужди. Като такъв основен sidebar.php може да изглежда така:

Файл на шаблона Footer.php

Какво мислите, че влиза в footer.php? Тук можете да поставите информация за авторските си права, допълнителни менюта, връзки, икони в социалните медии – всичко, което искате! Бихте ли искали да видите как изглежда основен footer.php? Тук:

Поставете тук съдържанието на долния си колонтитул, включително обажданията на функция на php (за да получите различни файлове с шаблони, например search.php), ако е необходимо.

Забележете и затварящи тагове във footer.php? Можете ли да познаете защо те трябва да бъдат включени във footer.php? По същия начин, можете ли да познаете защо и отварящите тагове са включени в header.php? Кажете ни вашите предположения в секцията за коментари в края на тази публикация ��

Четирите шаблонови файла, които току-що разгледахме по-горе, представляват много основна тема на WordPress. Има много други файлове с шаблони; има шаблон на файл за всеки елемент, който виждате в тема на WordPress, било то коментари, резултати от търсенето и 404 страници за грешки, само за да спомена няколко.

За да разберете напълно анатомията на тема на WordPress, трябва да се запознаете с различни файлове с шаблони. Можете да разглеждате всички използваеми плочки за шаблон в WordPress.

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

резюме

Темата на WordPress се състои от следните анатомични елементи:

  • Файлове на шаблони като index.php, header.php, search.php, category.php и т.н.
  • Тагове за шаблони като , и т.н.
  • CSS
  • Изображения и други медийни файлове
  • JavaScript файлове

А ето илюстрация, обобщаваща анатомията на тема на WordPress:

Търсите да продължите да учат? Проверете подробно тематичен наръчник по анатомия в WordPress Codex.

заключение

Всяка тема на WordPress, която виждате в мрежата, използва една и съща анатомична структура (дори популярната ни Total WordPress Theme), която можете да персонализирате, за да отговори на вашите нужди. След като увиете главата си около основите на развитието на темите на WordPress, няма ограничение за това какво можете да правите с / на 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