Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

WordPress index.php

podklyuchaem-style-css

index.php файл-шаблон WordPress

index.php — главный файл-шаблон темы WordPress, на основе которого строится каркас всех остальных файл-шаблонов.

В index.php внедряются подключаемые файлы WordPress: header.php (шапка сайта), sidebar.php (боковая панель, с виджетами, сайта) и footer.php (подвал сайта). Как подключать эти файлы мы рассмотрим в следующих уроках.

index.php темы WordPress содержит основной цикл, который выводит на экран все существующие записи (посты) сайта. Количество постов, выводимых файлом index.php, зависит от настроек админки WordPress Настройки -> Чтение, обычно это 10 постов.

10-postov-wordpress

Что такое цикл 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-kod-vnedrennyi-v-index-php

Отформатируем наш 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, вы должны увидеть следующую картину:

podklyuchaem-style-css

Читать далее: Внедряем подключаемые файлы header.php, sidebar.php, footer.php

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 11 Июл 2015
Статья обновлена: 29 Янв 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget