WordPress index.php
index.php файл-шаблон WordPress
index.php — главный файл-шаблон темы WordPress, на основе которого строится каркас всех остальных файл-шаблонов.
В index.php внедряются подключаемые файлы WordPress: header.php (шапка сайта), sidebar.php (боковая панель, с виджетами, сайта) и footer.php (подвал сайта). Как подключать эти файлы мы рассмотрим в следующих уроках.
index.php темы WordPress содержит основной цикл, который выводит на экран все существующие записи (посты) сайта. Количество постов, выводимых файлом index.php, зависит от настроек админки WordPress Настройки -> Чтение, обычно это 10 постов.
Что такое цикл WordPress, мы рассмотрим чуть далее.
Заполним файл index.php
На данный момент, наш файл index.php пустой, заполним его HTML-кодом. Здесь сделаю некоторое отступление, так как данный учебник посвящён созданию тем WordPress, то я не буду объяснять что делает тот или иной HTML или CSS код, но при этом сделаю его наиболее простым, чтобы вы могли полностью сосредоточиться на вопросе темизации WordPress и его функциях.
Разместите HTML-код, расположенный ниже в файл-шаблон index.php, у меня данный файл находится по адресу wp-content/themes/mytheme/index.php:
<!DOCTYPE html>
<html>
<!-- Голова страницы сайта -->
<head>
<meta charset="utf-8" />
<title>Название страницы</title>
</head>
<!-- Тело страницы сайта -->
<body>
<div class="wrapper">
<div class="header">
Шапка страницы сайта
</div> <!-- .header -->
<div class="main">
<div class="content">
Основной контент страницы сайта
</div> <!-- .content -->
<div class="sidebar">
Сайдбар страницы сайта (боковая панель с виджетами)
</div> <!-- .sidebar -->
</div> <!-- .main -->
<div class="footer">
Подвал страницы сайта
</div>
</div> <!-- .wrapper -->
</body>
</html>
При открытии вашего сайта, у вас должно появится следующее:
Отформатируем наш HTML-код с помощью CSS. Разместите код расположенный ниже, в файл style.css:
body {margin:0;background-color:#f2f2f2;}
.wrapper {color:#f2f2f2;margin:0 auto;font:bold 36px Arial;width:70%;}
.header {background-color:#43459d;margin-bottom:30px;padding-bottom:50px;}
.main {overflow:hidden;margin-bottom:30px;background-color:#43459d;}
.content {float:left;width:60%;padding-bottom:50px;}
.sidebar {float:left;background-color:#333;width:40%;padding-bottom:50px;}
.footer {background-color:#43459d;padding-bottom:50px;}
Затем в файл-шаблон index.php, добавьте WordPress функцию, которая подключит файл style.css, к файлу index.php
Код который нужно добавить выделен зелёным цветом, а сама WordPress функция красным.
<!-- Голова страницы сайта -->
<head>
<meta charset="utf-8" />
<title>Название страницы</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>
bloginfo(‘stylesheet_url’) — функция выводящая путь к файлу style.css
В итоге, открыв свой сайт на WordPress, вы должны увидеть следующую картину:
Читать далее: Внедряем подключаемые файлы header.php, sidebar.php, footer.php