Иерархия файлов темы (шаблона)

Введение в файлы шаблонов (и как они соотносятся с темами WordPress)

Когда вы создаёте простой статический веб-сайт, вы обычно просто используете HTML и CSS для рендеринга и настройки его внешнего вида. WordPress, с другой стороны, намного мощнее. Платформа построена на языке PHP, и она использует несколько специальных файлов .php для определения того, как формируются отдельные части ваших страниц сайта.


Например, посмотрите на правую часть этой публикации. Есть боковая панель, указывающая на другие похожие публикации из нашего блога. Когда ваш браузер сказал WordPress загрузить эту статью одновременно с этим было подтянуто несколько файлов-шаблонов, один из которых называется sidebar.php. Этот файл содержит информацию о том, как отобразить боковую панель, которую вы видите сейчас, и какие элементы она должна включать:

Боковые панели – это, конечно, только одна из частей полной страницы. Для большинства страниц WordPress требуется несколько файлов шаблонов для работы, в том числе:

  • index.php
  • header.php
  • sidebar.php
  • footer.php
  • functions.php
  • single.php
  • comments.php

Надо отметить, что это не все файлы-шаблоны, которые вы можете найти в WordPress. header.php, sidebar.php и footer.php, особенно важны, поскольку они известны как ‘часть шаблона’ («template partials’). Это означает, что они могут быть встроены в другие шаблоны.

Подход WordPress к созданию страниц вначале может показаться сложным. Однако, этот подход достаточно эффективный. Если у вас был уникальный шаблон для каждой отдельной страницы вашего сайта, настройка была бы кошмаром. Модульный подход к шаблонам WordPress позволяет вам вносить изменения в один файл и использовать этот элемент в любом месте сайта.

Когда дело доходит до выбора шаблонов для каждой страницы, первое, что WordPress делает – это проверяет вашу текущую тему. Каждая тема включает в себя собственный набор файлов-шаблонов, который будет иметь приоритет над всеми остальными. Это часть того, что мы называем ‘иерархией шаблонов WordPress’ в действии, что мы и рассмотрим в следующем разделе.

Теперь, когда вы понимаете, как WordPress отображает ваши страницы, становиться понятно, что темы – это, в основном, коллекция файлов-шаблонов. На практике для темы требуется только один файл шаблона, и это – index.php. Тем не менее, большинство тем включает в себя гораздо больше шаблонов. Для тех моментов, которые не описаны в выбранной теме, WordPress возвращается к другим файлам в своей иерархии, чтобы заполнить эти пробелы.

Кладезь мудрости от PHP-разработчиков

  • Много теории без практики не приводит ни к чему хорошему, как и наоборот. Старайся соблюдать баланс.
  • Выбор языка — это выбор правильного инструмента, стоит отталкиваться от решаемых им задач, всех плюсов и минусов.
  • Бери PHP, поработай с ним пару лет, а потом уже появится понимание, что тебе необходимо от языка программирования, и будут критерии для сравнения.
  • Выбирай популярный язык за который хорошо платят.

Попробуйте свои силы в PHP прямо сейчас на интерактивном курсе «Основы PHP». Курс поможет понять, подходит ли вам этот язык. Ещё можно оформить подписку — сразу после этого станут доступны все наши интерактивные курсы, они есть не только по PHP.

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Как на компьютере открыть HTML файл (документ)

Есть несколько вариантов того, как открыть HTML файл (документ) на компьютере.

Если внимательно посмотреть на картинку файла, то можно увидеть, что это изображение вашего браузера, используемого по умолчанию. В данном случае – это Opera. Если браузер по умолчанию Google Chrome, то, соответственно, будет виден значок Хрома. И т.д.

Как открыть HTML файл на компьютере

Если произвести двойной клик левой кнопкой мыши на локальном файле с расширением HTML, то откроется просмотр в браузере.

Но вы и так это пробовали и знаете, а значит перейдем ко второму варианту.

Второй же вариант предполагает открытие исходного кода HTML файла. Для этого следует:

  1. Кликнуть правой кнопкой мыши на файл, вызвав тем самым контекстное меню;
  2. Выбрать пункт «Открыть с помощью»;
  3. В выдвинувшемся меню выбрать «Выбрать другое приложение».

  4. На открывшейся странице можно увидеть часть приложений (программ), с помощью которых можно открыть HTML файл на компьютере. И это все – браузеры. Чтобы читать и изменять код они не годятся. Поэтому необходимо прокрутить модальное окно немного вниз и нажать пункт «Еще приложения» (Стоит отметить, что инструкция написана для Windows 10, в других версиях операционной системы действия все те же самые, но пункты меню могут немного различаться).

  5. И вот тут уже появляется полный список предустановленных в Windows программ, с помощью которых можно открыть HTML файл на компьютере.

    В этом списке есть 2 программы, которые откроют не графическое отображение файла, как в браузере, а именно код. Эти программы: WordPad и Блокнот. Да-да, тот самый что ни есть стандартный «Блокнот» легко способен открыть документ с расширением HTML и посмотреть, прописанный в нем код. И WordPad и Блокнот являются текстовыми редакторами, а значит полностью справляются с поставленной задачей, но есть программы специализированные. Об одной из них пойдет речь ниже. Word и Excel для этой задачи не подходят, несмотря на то, что это текстовые редакторы, они откроют файл в графическом виде.

Единая точка входа

Принцип работы единой точки входа очень прост.

Веб-сервер настраивается так, чтобы все HTTP-запросы, вне зависимости от их URL, обрабатывались одним и тем же скриптом index.php.

Перенаправление всех запросов на index.php

Текущий URL можно получить из переменной $_SERVER. Дальше останется только написать свои правила обработки URL-адресов. Упрощённый пример:

Однако в схеме выше есть одно упущение. Ведь если на сервер пришёл запрос к существующему файлу (style.css, script.js, logo.png и т.д) — сервер должен отдать этот файл, а не перенаправлять его.


Принцип работы единой точки входа

Вот и весь принцип единой точки входа. Именно так она работает в популярных CMS вроде WordPress и Opencart, в фреймворках Laravel, Symfony и т.д.

Единственный вопрос, который вам останется решить — что делать с запросами к существующим папкам.

Лично я предпочитаю также перенаправлять их на index.php.

На самом деле на сайтах часто используются 2 точки входа.

Первая — index.php, вторая — отдельный скрипт, предназначенный для работы с сайтом через консоль.

Плюсы единой точки входа

  • Позволяет использовать ЧПУ
  • Позволяет полностью управлять URL-адресами в PHP, в том числе хранить URL-адреса в базе данных
  • Скрипты с конфигами, важными функциями и библиотеками подключаются только 1 раз и становятся доступны везде. Не нужно дублировать их подключение где-либо ещё.

Единая точка входа с Apache

Для настройки единой точки входа необходимо добавить несколько строк в конфиг веб-сервера. Проще всего это сделать с помощью файла .htaccess.

Этот файл позволяет переопределять настройки Apache для определённых сайтов и папок.

Добавляем следующие настройки в .htaccess:

Чтобы перенаправление срабатывало для существующих директорий, удаляем строку с !-d в конце, вот так:

Готово. Получить URL адрес текущей страницы можно из переменной $_SERVER.

Также в интернете часто можно встретить другой вариант конфига, отличается он только последней строкой:

Главное отличие в том, что URL-адрес текущей страницы будет храниться как в $_SERVER, так и в отдельном GET-параметре, в нашем случае $_GET, причём этот URL будет очищен от GET-параметров.

Флаг QSA нужен, поскольку без него GET-параметры не будут работать, т.е. массив $_GET будет содержать только url_param и больше ничего.

Какой из двух вариантов выбрать — решать вам, лично мне больше нравится первый.

Отладка шаблонов

Что, если в шаблоне ошибка? Например, синтаксическая. Конечно, ошибки будут возникать, куда же без них.

Шаблон компилируется в функцию, ошибка будет либо при компиляции, либо позже, в процессе её выполнения. В различных шаблонных системах есть свои средства отладки, тут не блистает.

Но и здесь можно кое-что отладить. При ошибке, если она не синтаксическая, отладчик при этом останавливается где-то посередине «страшной» функции.

Попробуйте сами запустить пример с открытыми инструментами разработчика и включённой опцией «остановка при ошибке»:

В шаблоне допущена ошибка, поэтому отладчик остановит выполнение.


В Chrome картина будет примерно такой:

Библиотека LoDash пытается нам помочь, подсказать, в каком именно шаблоне произошла ошибка. Ведь из функции это может быть неочевидно.

Для этого она добавляет к шаблонам специальный идентификатор , который служит аналогом «имени файла». На картинке он отмечен красным.

По умолчанию имеет вид , где – постоянно увеличивающийся номер шаблона. В данном случае мы можем понять, что эта функция получена при самой первой компиляции.

Это, конечно, лучше чем ничего, но, как правило, его имеет смысл заменить на свой, указав при компиляции дополнительный параметр :

Попробуйте запустить исправленный пример и вы увидите в качестве имени файла .

Не определена переменная – ошибка

Кстати говоря, а в чём же здесь ошибка?

…А в том, что переменная не передана в шаблон. При доступе к неизвестной переменной JavaScript генерирует ошибку.

Самый простой способ это обойти – обращаться к необязательным переменным через , например . Тогда в случае просто ничего не будет выведено. Но в данном случае реакция совершенно адекватна, так как для меню список опций является обязательным.

Типы страниц и названия файлов

Ниже список страниц сайта и отвечающие за них php файлы темы. В этом разделе расписана картинка иерархии файлов темы, которая немного выше.

Ниже указана страница сайта и соответствующий ей список PHP файлов. Такие файлы должны находится в корневой папке темы.

  • (когда используется шаблон страницы)
  • (для древовидного типа с поддержкой шаблонов. С WP 4.7)
  • (позволяет указать шаблон для отдельной картинки)
  • (тоже что и attachment.php)

Под началом и концом MIME типа, имеется виду первая и последняя часть MIME типа, разделенная . Например, MIME-тип текстового файла: и значит будет проверяться наличие файл text.php, затем plain.php, затем text-plain.php.

Полный список MIME типов смотрите в описании get_allowed_mime_types().

  • (если страница пагинации)
  • (если страница пагинации)
  • (если страница пагинации)
  • (если страница пагинации)
  • (если страница пагинации)
  • (если страница пагинации
  • (логика постоянных страниц, если для главной выбрана страница)

Страница блога появляется, когда для главной выбрана постоянная страница

Шаблоны встраивания используются когда запрашивается запись через REST API. Встраивания появились в версии 4.5 и позволяют встраивать ваши записи в чужие сайты. См. get_post_embed_url()

Чтобы изменить только контент встраивания, можно в теме создать файл и описать там HTML. Оригинальный HTML находится в файле движка /wp-includes/theme-compat/embed-content.php

Your First Webpage

When we’re working in HTML we’re creating web-pages. HTML documents are meant to be read and processed by a web browser. In order to create a website that it organized properly, we’ll want to make sure that all of the HTML files we create are inside the same folder.

Let’s begin by creating an empty folder for all of our HTML files going forward in the course. You can call it whatever you want, most people will name it the same as their website.


Now that we have an empty folder we can create our HTML file. If your IDE supports it, I would recommend adding this new folder to the IDE’s file explorer or workspace. This will make it easier to see what’s going on without having to leave the editor.

Creating index.html

Inside the new folder create a file named . is a special file name which indicates that this is the default webpage for this directory of our website.

Just like most people organize their files into folders and sub-folders, websites are also organized in this same way. When your website is run by the browser it will use the directory of the HTML file to determine the web page’s URL. This URL is either relative to your local file system, or to your hosted website.

In this case, all you need to know is that when we name the HTML file , and it’s at the root directory of our website, the browser will think that it’s the homepage of our site!

Now that we have our file created, let’s add some text in it and test it out on the browser. Inside type .

Copy

This is the most basic form a website can take, just some plain text written out.

Now find in your file system and open it with your browser. There should be an option to do this, and usually by default .html files will open in your browser if you double click them.

Whe the page loads on the browser it should say !

Believe it or not you’ve just created your first website. It’s really basic and only has a few words on it, but it’s still a website and you’ve made your first step towards becoming a web developer.

Tags

While our current website is impressive in it’s own right, it’s not technically a properly structured HTML document. HTML documents are all required to be structured in a certain way to ensure that they will display correctly in all different versions of different browsers.

Our HTML document, with only plain text, will display fine, but if we try to do anything more complex we run the risk of some older browsers not understanding the page.

In order to make this a proper HTML document let’s format it correctly.

Copy

Take a look at the updated HTML document above. This is now structured correctly, and should be understandable by every browser.

Now, your first thought is most likely What are those weird < /> things. It’s a good thought, if this is your first time seeing HTML code then you’ll be wondering what those are.

Those symbols with the and signs are called tags. HTML tags are used to structure and format the HTML document, and can be used to describe the layout of a website.

All of the content in our webpage is going to be contained in these tags. There are hundreds of HTML tags, although luckily most of the time you can get by with only knowing 10-15 of them. All tags have names associated to them, and depending on what you’re trying to display on the webpage you’ll use a different tag.

Container vs Non-Container Tags

There are two basic types of tags in HTML, container tags and non-container tags.

Container Tags are comprised of two tags that go together, an opening and a closing tag. In the example above we have a bunch of container tags. Take a look at the tags and you’ll get an idea of how these work.

All tags are comprised of a , with the name of the tag being printed in the middle. End tags are special because they contain a right before the name of the tag (as you can see in ).

Container tags encapsulate other tags and plain text. Container tags are also nest-able, meaning you could have a container tag within another container tag. This nesting gives way to parent child relationships. Generally an html container tag can have a parent tag and also child tags.

Next are non-container tags (I sometimes call these single tags). These are tags which don’t have a starting and an ending component, instead they’re just a single structure. These tags will have a forward slash right next to the greater-than sign on the right.

In the code above we don’t have any non-container tags (they’re more rare), but we’ll look at a bunch of them throughout the course.

Файлы

Можно реализовать не только загрузку файлов на сервер, но и их редактирование.

Вот пример кода, позволяющий редактировать данные в блокноте:

<?

$fileText = file_get_contents(“article.txt”); //Получаем текст из файла

 If(isset($_POST)) { //Проверяем, отправил ли пользователь форму

$file = fopen(“article.txt”, ”w”); //Открываем файл для записи

$fileWrite = fwrite($file, $_POST); //Вносим изменения

fclose($file); //Закрываем файл

}

?>

<form method=”post”>

<textarea name=”text”><?echo $fileText;?></textarea><!—Выводим текст в поле для редактирования—><br>

<input type=”submit” value=”Отредактировать”>

</form>

На PHP вполне можно создать файловый менеджер или текстовый редактор.

Базы данных

К сайту на PHP подключается база данных. Это во многом упрощает разработку, потому что вся информация будет храниться в таблицах, а не в самом коде. Так быстрее редактировать и добавлять данные на сайт.

Например, сведения о пользователе. Если бы не базы данных, пришлось бы хранить все авторизационные данные в коде, а это не лучший вариант, потому что тогда загрузка длилась бы вечность.

Продолжим пример с авторизацией. Страница auth.php получает логин и пароль. Дальше она может сделать запрос в базу данных, чтобы узнать, существует ли такая комбинация.

<?

//Получаем данные из супермассива $_POST в переменные для удобства

$login = $_POST;

$password = $_POST;

//Делаем запрос в базу данных, чтобы проверить наличие пользователя с таким логином и паролем

$queryResult = mysql_query(“SELECT * FROM userlist WHERE login=’$login’ AND password=’$password’”);

//Выполняем проверку

 If(mysql_num_rows($queryResult) == 1) {

//Если есть1 совпадение, то выводим надпись об успешности операции

echo “Вы успешно вошли!”;

} else {

//Иначе пишем, что комбинация неверна

echo “Неверный логин или пароль!”;

}

?>

Разумеется, это очень упрощенная версия кода, которую вряд ли можно назвать защищенной. На самом деле нужно выполнить множество проверок, чтобы исключить вероятность SQL-инъекции — это когда пользователь пытается ввести некорректную информацию, чтобы получить доступ к базе данных.


С этим читают