Структура шаблона WordPress. Файлы WordPress шаблона.
- 17.09.2013
- Как сделать сайт бесплатно, Темы WordPress
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаю рубрику Темы и шаблоны для сайтов и ее раздел шаблоны для WordPress. Предлагаю в этом посте поговорить о структуре WordPress шаблона. Здесь вы не найдете подробной инструкции о создание WordPress шаблона, такая инструкция будет складываться пост за постом, статья за статьей, так как уместить такой мануал в одну статью да так, чтобы это было понятно и доступно каждому, практически невозможно. Если у вас есть какие-то пожелания просьбы и предложения по данной теме, то отписывайтесь в комментариях и задавайте вопросы.
О чем же мы будем говорить в этой статье? Говорить мы будем о файлах WordPress шаблона и их назначение. Сразу скажу, что структура WordPress шаблона
Я не раз повторял в прошлой статье (Что нужно знать, чтобы создать шаблон WordPress), что для создания собственной WordPress темы достаточно немного здравого смысла, трудолюбия и времени, с технологиями, используемыми для создания сайтов, можно знакомиться и разбираться попутно.Основные файлы WordPress шаблона и их назначение
Содержание статьи:
- Основные файлы WordPress шаблона и их назначение
- Как подключать файлы WordPress шаблона. Создание структуры WordPress темы.
Далее я перечислю все основные файлы WordPress шаблона и их назначение, их всего одиннадцать:
- style.css – таблица стилей WordPress шаблона, отвечает за оформление и активацию и дополнительную информацию о шаблоне WordPress;
- index.php – отвечает за вывод главной страницы WordPress, обратите внимание: главная страница может быть, как динамичной так и статичной, это нужно учитывать при верстке шаблона;
- single.php – страница публикаций WordPress, собственно, вы сейчас видите эту страницу на моем блоге;
- archive.
php – данная страница отвечает за отображение категорий и архивов WordPress; - searchform.php – в этом файле должна находиться код формы поиска по сайту;
- search.php – этот файл WordPress шаблона отвечает за отображение результатов поиска на сайте WordPress;
- 404.php – страница ошибки 404, такая ошибка появится, если посетитель введет неверный URL;
- comments.php – шаблон для отображения комментариев на страницах WordPress;
- footer.php – отвечает за отображение подвала сайта;
- header.php – этот файл WordPress шаблона отвечает за вывод шапки сайта;
- sidebar.php – данный файл выводит боковые колонки, в которых отображается меню и другая вспомогательная информация;
- page.php – файл, который отображает структуру WordPress страницы.
php – данная страница отвечает за отображение категорий и архивов WordPress;Стоит добавить: хоть эти файлы и называются обязательными, на самом деле они необязательны, например, в структуре шаблона WordPress на моем блоге нет файлов search.php и searchform.php, вместо этого я использую пользовательский поиск Google.
Как вы поняли, файлы, образующие структуру WordPress шаблона, можно подключать друг к другу и комбинировать. О способах подключения файлов WordPress мы поговорим чуть позже в другой статье.
Давайте сперва разберемся, какие файлы следует подключать, а какие являются структурообразующими. Структуру WordPress шаблона образуют шесть файлов: index.php, single.php, page.php, archive.php и 404.php. Все остальные файлы подключаются к ним. Кстати, о подключении файлов WordPress шаблона: в php есть функции include и require, для подключения основных файлов шаблона WordPress их использовать не стоит, так как есть специальные функции. Подключаемыми файлами являются все остальные.
Как подключать файлы WordPress шаблона. Создание структуры WordPress темы.
Для начала я предлагаю вам оценить взглядом мой блог, здесь можно выделить три области: шапка сайта, подвал сайта и контент сайта. Соответственно, за вывод содержимого WordPress шаблона отвечают те пять файлов, которые я перечислил выше.
К ним стоит цеплять все остальное. Например: мы подключаем к файлу index.php файлы footer.php, header.php и sidebar.php, после чего увидим примерно то, как показано на рисунке:
Структура WordPress шаблона
Точно таким же образом можно подключать указанные файлы к файлам single.php, page.php, archive.php, 404.php, search.php. Если файлы не подключить, то созданный WordPress шаблон будет работать, но отображаться неподключенный блок не будет. Куда же подключать оставшиеся файлы? Тут все просто, исходить нужно из здравого смысла. Логично предположить, что файл header.php должен быть подключен к каждому из файлов с содержимым WordPress сайта, поэтому таблицу стилей CSS следует подключать к файлу header.php, внутри тэга head, тогда оформление сайта будет единым. Файлы serchform.php можно подключить к любому из файлов, но логичнее всего его подключать к файлам sidebar.php или header.php, таким образом, поиск по сайту будет отображаться на каждой странице блога WordPress.
Таким образом, у нас остался не подключенным файл comments.
php, его можно подключить абсолютно к любому файлу шаблона WordPress, но, обычно, в блогах этот файл подключают только к файлу single.php, чтобы комментировать можно было только основные записи блога. Итак, я думаю, что у вас уже сложилось полное впечатление о структуре шаблона WordPress и вы готовы начать создавать свою собственную WordPress тему. Но это об этом, конечно, в других постах. Далее нам нужно разобраться с файлами, которые не являются основными для структуры шаблона WordPress, но об этом в другой статье.
Возможно, эти записи вам покажутся интересными
Урок #7. Вёрстка страницы записи. Создание темы WordPress.
Страница single.html выводит полный текст записи. Эту страницу можно стилизовать под свои нужны и добавлять в нее другие информационные блоки, начиная от формы комментариев, кнопок социальных сетей, форм подписки и тд.
Подготовка к вёрстке
0. Создаём копию файла page.
html и переименовываем его в single.html.
1. Каркас страницы single.html мы будем создавать по готовому дизайну, но на данном этапе не будем производить вёрстку формы комментариев, так как её мы подключим позже, когда будем адаптировать вёрстку под WordPress.
HTML каркас
Находим блок div с классом information-post и добавляем в строку, которая выводит информацию о записи новый элемент — категория.
<!-- Информация о записи страницы/записи--> <div> <h2>Тестовая страница</h2> <p>Категория: Тест / Опубликовано: 2017-07-24 / Просмотров: 30</p> </div>
После закрытия блока text-post создаём новый div с классом devide-line, который будет являться разделительной линией для блоков.
<!-- Разделительная линия --> <div></div>
После блока devide-line, создаём новый div с классом related-post.
<!-- Похожие записи --> <div> <p>Еще записи по теме</p> <ul> <li><a href="">Урок #1. Структура темы WordPress.</a></li> <li><a href="">Урок #2. Создание макета для темы WordPress в Balsamiq Mockups.</a></li> <li><a href="">Установка локального web-сервера Xampp (Windows)</a></li> </ul> </div>
После закрытия блока related-post вставляем еще один блок devide-line, он будет отделять блок «Похожие записи» от блока с «Комментариями».
<!-- Разделительная линия --> <div></div>
Готовый каркас страницы single.html.
<!DOCTYPE html> <html> <head> <!-- Charset --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Page info --> <title>Страница</title> <meta name="language" content="ru"> <!-- Favicon --> <link rel="shortcut icon" href="favicon/favicon.</p> </div> <!-- Навигация --> <div> <ul> <li><a href="">Главная</a></li> <li><a href="">Об авторе</a></li> <li><a href="">Контакты</a></li> <li><a href="">Карта сайта</a></li> </ul> </div> </div> <!-- Область для вывода контента --> <div> <!-- Информация о записи страницы/записи--> <div> <h2>Тестовая страница</h2> <p>Опубликовано: 2017-07-24 / Просмотров: 30</p> </div> <!-- Текст страницы/записи --> <div> <p>Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается. Создание макета для темы WordPress в Balsamiq Mockups.</a></li> <li><a href="">Установка локального web-сервера Xampp (Windows)</a></li> </ul> </div> <!-- Разделительная линия --> <div></div> </div> <!-- Боковая колонка --> <div> <div> <h6>CMS системы</h6> </div> <div> <ul> <li><a href="">Wordpress</a> <ul> <li><a href="">Настройки</a></li> <li><a href="">Функции</a></li> <li><a href="">Плагины</a></li> <li><a href="">Хаки</a></li> <li><a href="">Создание темы</a></li> </ul> </li> <li><a href="">Программы</a> <ul> <li><a href="">Google Chrome</a></li> <li><a href="">Balsamiq Mockups</a></li> <li><a href="">Sublime Text</a></li> <li><a href="">Adobe Photoshop</a></li> </ul> </li> </ul> </div> <div> <h6>Текстовый блок</h6> </div> <div> <p>Каждый веб-разработчик знает, что такое текст-«рыба».
png" type="image/png">
<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon/favicon_apple_60.png">
<link rel="apple-touch-icon" href="favicon/favicon_apple_76.png">
<link rel="apple-touch-icon" href="favicon/favicon_apple_120.png">
<link rel="apple-touch-icon" href="favicon/favicon_apple_152.png">
<!-- Style CSS-->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<!-- JQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<!-- Обёртка -->
<div>
<!-- Шапка -->
<div>
<!-- Название блога и описание -->
<div>
<h2><a href="">Блог Артёма Санникова</a></h2>
<p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.
</p>
<p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p>
<p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>
</div>
<!-- Разделительная линия -->
<div></div>
<!-- Похожие записи -->
<div>
<p>Еще записи по теме</p>
<ul>
<li><a href="">Урок #1. Структура темы WordPress.</a></li>
<li><a href="">Урок #2.
Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p>
</div>
<div>
<h6>Изображение</h6>
</div>
<div>
<center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png"></center>
</div>
</div>
<!-- Подвал-->
<div>
<p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p>
<p>Артём Санников © 2014 - 2017</p>
</div>
</div>
</body>
</html>
CSS стили
Ниже предоставлен код css для оформления блоков devide-line и related-post. Добавьте его в файл style.
css.
/*Разделительная линия*/
.devide-line {
width: 670px;
height: auto;
border-bottom: 1px solid #f5f5f5;
margin: 30px 0;
}
/*Похожие записи*/
.related-post {
width: 670px;
height: auto;
overflow: hidden;
}
.related-post p {/*заголовок блока*/
font-size: 16px;
font-weight: bold;
color: #333;
margin: 0 0 30px 0;
line-height: 1;
}
.related-post ul {/*стилизация списка*/
list-style-position: inside;
list-style-type: none;
margin: 0 0 0 20px;
}
.related-post ul li a {
display: inline-block;
color: #666;
font-size: 14px;
color: #666;
text-decoration: none;
margin: 0 0 15px 0;
line-height: 1;
}
.related-post ul li a:before {
float: left;
content: "-";
font-size: 14px;
color: #666;
margin: 0 10px 0 0 ;
}
. related-post ul li:last-child a {
margin: 0 0 0 0;
}
.related-post ul li a:hover {
text-decoration: underline;
color: #2d3e50;
}
related-post ul li:last-child a {
margin: 0 0 0 0;
}
.related-post ul li a:hover {
text-decoration: underline;
color: #2d3e50;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: WordPress, Создание темы.
css — Получение HTML вывода страницы без запроса (для CriticalCSS, PurgeCSS)
Задавать вопрос
спросил
Изменено 1 год, 6 месяцев назад
Просмотрено 46 раз
Я много работаю с устаревшим веб-сайтом с файлами css, которые использовались на многих страницах, что приводило к очень раздутым таблицам стилей, загружаемым в браузер. Я хочу сделать некоторые трюки с производительностью, чтобы избежать этого, и подумал о CriticalCSS (извлечение критических стилей) и PurgeCSS («дрожание дерева» из мертвых стилей для шаблона).
Я планирую сделать это для каждого пользовательского шаблона, и мне нужен сгенерированный HTML, который отправляется в браузер. Проблема в том, что мне нужно получить эти HTML-файлы во время процесса сборки, поэтому нет возможности сделать фактический запрос к WordPress и просто получить их из выходного буфера.
Итак, есть ли способ получить сгенерированную страницу из WordPress, просто запустив ее из интерфейса командной строки, а не запрашивая настоящий URL-адрес ? Вероятно, потребуется передать идентификатор сообщения или часть URL-адреса, идентифицирующего сообщение, в качестве аргумента, чтобы он мог правильно настроить запрос.
Решения, которые я пробовал:
- Ввод PurgeCSS может анализировать файлы PHP, но нет HTML из WordPress
специальные функции (
get_header(),get_footer()). - Я могу получить HTML, выполнив команду WP-CLI
wp-cli eval-file, но затем весь HTML, который зависит от запрошенного поста, теряется (без настройки запроса). - Я также видел это решение для получения HTML, но ему все еще нужен правильный запрос настраивать.
Спасибо!
- css
- шаблон страницы
- wp-cli
2
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
.
Как просматривать содержимое страницы с помощью WP-CLI
Обновлено 16 августа 2021 г., Джон-Пол Брионес
2 минуты, 11 секунд на чтение
Хостинг InMotion Hosting WordPress включает WP-CLI . Этот интуитивно понятный инструмент позволяет вам управлять содержимым ваших веб-сайтов WordPress непосредственно из командной строки в качестве альтернативы использованию административной панели. В этом руководстве вы узнаете, как отображать содержимое страницы из командной строки с помощью команды wp post get в WP-CLI .
Сначала вам нужно найти ID Страницы. Вы можете использовать идентификатор ID для идентификации и управления каждой страницей в WP-CLI 9.0016 . Как только вы найдете идентификатор страницы, вы можете использовать подкоманду wp post get , чтобы найти содержимое конкретной страницы.
Чтобы просмотреть содержимое страницы , просто выполните следующие действия.
SSH на ваш сервер в качестве пользователя cPanel, которому принадлежит веб-сайт, с которым вы хотели бы работать.
Используйте команду cd, чтобы переключиться в корневой каталог документов вашего веб-сайта.
Пример: cd public_html/wp
ПРИМЕЧАНИЕ: Обязательно замените public_html/wp фактическим путем к корневому каталогу документов вашего веб-сайта.
Выполните следующую команду:
wp post get ## —field=post_content
ПРИМЕЧАНИЕ: Обязательно замените ## на фактический идентификатор страницы, с которой вы работаете.
Вывод будет аналогичен приведенному ниже примеру:
[email protected] [~/public_html/wp]# wp post get 42 --field=post_content< h3>Написание материалаУлучшенный сервис копирайтинга
Концепция моей компании была разработана командой.
