Создайте тему газеты с WP_Query и 960 CSS Framework

15 января 2018

WP_Query - это мощный инструмент для контроля того, что выходит из вашего цикла. Сегодня я собираюсь научить вас всем, как использовать его, чтобы создать газетную тему с 3 колонками, в которой есть все ваши главные сообщения в блоге в главном столбце, а также в стороне набор сообщений с определенной категорией. Мы будем использовать платформу 960 CSS для базовой компоновки и сброса нашей темы, она избавит вас от необходимости работать!

Предисловие

Наш план атаки состоит в том, чтобы вытащить все сообщения с общей назначенной категорией и поместить их в сторону отдельно от основных сообщений. Мы также рассмотрим метод создания «Featured post» без использования jQuery или любого JavaScript вообще! Я также выбрасывал.psd (используя шаблоны, которые 960 предоставляют вам при загрузке) того, к чему мы стремимся сегодня. Загрузите.psd здесь.

Мы предполагаем, что у вас установлена ​​живая WordPress, будь то локальная или размещенная. Если вам нужна небольшая помощь в этом, стоит сначала изучить, как установить WordPress локально в Windows или OS X.

Шаг 1: Необходимость

Alrighty. Поэтому, помимо очевидной необходимости установки WordPress, нам понадобятся и некоторые дополнительные вещи. У меня есть целая куча файлов, которые вам понадобятся в вашей папке с темами.

Все должно идти в папку темы с темами wp-content, поэтому создайте папку с именем triColumews и поместите все в нее! 960 CSS Framework - Это тоже очевидно. В папке triColumews создайте еще одну папку с именем 960. Перейдите к 960 Grid System и заберите копию фреймворка. В загрузке вы найдете несколько папок. Откройте папку с меткой «код» и скопируйте 3 файла CSS (960.css, reset.css и text.css) в папку 960, созданную вами второй раз. Теперь все сладко. functions.php. Нам понадобится боковая панель, поэтому нам нужно зарегистрироваться функции functions.php. папка с изображениями - Ну, дух... У каждой приличной темы есть некоторые образы! Создайте образы папок и поместите в него bodyBg.png и searchBg.png. index.php - Очевидная концепция... Мы будем работать в основном на этом. page.php и single.php. Наша индексная страница будет иметь 3 столбца вправо? Но я не думаю, что отдельные страницы требуют 3 столбца. Мы меняем страницы под шаблонов в самом конце, так что если вы переходите на страницу, это не все запутано из-за неправильного WP_Query в индексе (неверно для конкретной страницы, а не индекса). style.css - Скопируйте это и отредактируйте, если хотите.

Получил все это? Хорошо. Теперь вы должны быть настроены для остальной части учебника! Не забудьте активировать тему в WP-admin (wp-admin themes.php).

Шаг 2 - HTML и базовый код WordPress

Я пока не дам вам весь код WordPress. Я дам вам весь код WordPress, за исключением WP_Query. У них будет свой шаг, потому что им обязательно нужно объяснение! Он слишком сильно заполнил страницу WAY, поэтому я включил все это в.txt, а не здесь. Загрузите его и скопируйте в index.php. Или введите его, какие бы ни были костюмы. Ввод поможет вам вспомнить, что вы делаете!

Некоторые вещи, которые нужно отметить

Это очень много кода для обработки, поэтому я просто задержу интересующие вас детали и объясню их.

head - все это просто материал WordPress. Таблицы стилей, RSS2 и некоторые материалы WP. #dateAndTime - Вы когда-нибудь читали газету, у которой нет даты сверху? И я нет. Давайте не будем сейчас, хм? Это отображает дату в формате: (с 17 июля 08). Мы вернемся наверх, чтобы он всегда оставался в окне браузера! Просто потому, что... form id = "searchform" - это поисковая форма для блога! Я просто засунул один, чтобы заполнить пространство и сделать его еще более убедительным! dynamic_sidebar - Это в основном объясняет это... Это боковая панель, которую мы хотим, с именем triNews, чтобы ее можно было идентифицировать в Dashboard. Примечание. Вы можете видеть, что он уже начинает формироваться с точки зрения макета (очень сглаженный макет, но не сбрасывается!). Я импортировал файлы 960 с помощью @import в style.css, чтобы сохранить HTTPRequests и он также дает родительскую силу кода над кодом 960. Все маленькие забавные занятия... Читайте дальше.

960 классов

Итак, я уверен, вы замечаете все эти маленькие «grid_5» и «container_12» классы и что происходит, черт возьми? Позвольте мне объяснить вам. Число, следующее за «grid_», - это количество столбцов, которые мы хотим, чтобы выбрать div. Поскольку нам нужно 12 столбцов, мы завершаем все это (используя оболочку div #) с классом «container_12». В базовом CSS, который я вам предоставил, у него есть импорт для трех 960 файлов, поэтому у нас уже есть половина макета, когда мы вообще не кодировали CSS!

Это не выглядит слишком кричащим. Он не был разработан, и у него даже нет контента:

Шаг 3 - WP_Querys

Вот где все волшебство происходит! У нас есть три WP_Querys:

theirNews - Итак, мы разделили новости, не так ли? Мы хотим, чтобы этот раздел показывал только сообщения с категорией 'theirNews'. С моей стороны (моего тестового блога) я дал около 7 моих сообщений этой категории. Вы тоже должны дать им тоже. Вам также нужно найти идентификатор категории своей категорииNews, но я быстро рассмотрю, как это можно найти позже. featured - Помните, я сказал, что покажу вам, как сделать заметку без jQuery? Вот решение в двух словах: показывать только самую последнюю запись на сегодняшний день в собственной петле запросов. главное - трюк с этим заключается в том, что мы не хотим, чтобы категория ихNews здесь, и мы не хотим первого сообщения. Это легко, вы увидите через минуту.

Шаг 3: 1 - theirNews

Итак, мы хотим, чтобы столбец WordPress содержал только одну категорию. Как мы это делаем? Используя широкий диапазон параметров, предоставляемых WP_Query, это легко сделать. Замените комментарий theirNews в index.php следующим образом:

<?php 
    $theirNews = new WP_Query();
    $theirNews->query('category_name=theirNews&showposts=7');
    while($theirNews->have_posts()) : $theirNews->the_post();
?>
    <!-- LOOP CONTENT HERE -->
<?php endwhile; ?>

Запрос! Давайте прыгаем прямо в нее.

$ theirNews - это переменный запрос, который мы будем использовать для раздела 'theirNews'. Это определяет новый запрос, всю основу WP_Query. запроса (); - Вот наши конкретные параметры. Мы хотим показать максимум 7 сообщений, все под названием категории 'theirNews'. Разумеется, вы можете изменить эти переменные, 7 - это просто количество сообщений, на которые я присвоил категорию. Остальная часть кода представляет собой сокращенный цикл, который задается с помощью нашей переменной $ theirNews.

Нам нужен определенный код цикла.

<div class="post">
    <h4><?php the_title(); ?></h4>
    <div class="entry">
        <?php the_content('<br />Read complete article'); ?>
    </div>
</div>

Просто заголовок, завернутый в тег h4, с содержимым, завернутым в «запись» класса div. Большой! Вы сделали свой первый WP_Query из 3, который должен теперь перечислять только категории с именем 'theirNews'

Шаг 3: 2 - признакам

Мы хотим показать только 1 сообщение, в котором нет категории «их новинки». Только 1. Поскольку вы теперь понимаете основы WP_Query, я дам вам полный код (замените комментарий FEATURED POST):

<div id="featuredPost" class="post">
    <?php
        $featured = new WP_Query();
        $featured->query('showposts=1&cat=-59');
        while($featured->have_posts()) : $featured->the_post();
    ?>
        <h2><?php the_title(); ?></h2>
        <em class="postMetaData">Posted under <?php the_category(', '); ?>.</em>
        <div class="entry">
            <?php the_content('Read complete article'); ?>
        </div>
    <?php endwhile; ?>
</div><!-- end div#featuredPost -->

Это наш признанный пост, поэтому я точно назвал div 'featuredPost', но потому что позже мы также захотим стилей из обычных сообщений, я включил класс 'post'.

То же самое касается WP_Query. На этот раз параметры показывают только 1 сообщение, которое не относится к категории 59. Категория 59 - это идентификатор категории «ихNews». Мне нужно сказать вам, как это получить!

    Откройте WP-Admin. Нажмите «Управление». Нажмите «Категории». Нажмите на категорию 'theirNews' (или все, что вы назвали). Проверьте URL-адрес страницы. Это должно быть что-то вроде этого: Посмотрите, как это получилось &cat_ID = 59 в конце? Это номер вашей категории. Шахта - 59, убедитесь, что вы изменили ее на любой идентификатор своей категории «yourNews»! Помните это число, оно нам понадобится и в следующем запросе.

Разница с признанным постом в основном равна h2. Потому что это второй по величине заголовок на странице. Пройдите в разделе «yourNews», который мы заключили в элемент h4, потому что после сообщений в главном столбце это будет следующий заголовок на странице. Все для сакэ.

Шаг 3: 3 - основной

Наш последний WP_Query. Это будет все сообщения, за исключением сообщений, содержащихся в категории 'theirNews' (вам нужен идентификатор. Мне было 59, вы можете помнить свое?). Но поскольку мы уже показываем первый пост в целом (сообщение о функции), мы не хотим показывать его снова, верно? Поэтому нам нужно компенсировать сообщения на 1 - легко сделать с мощными параметрами WP_Query. Замените комментарий MAIN WP QUERY в index.php следующим образом:

<?php
    $main = new WP_Query();
    $main->query('posts_per_page=5&offset=1&cat=-59');
    while($main->have_posts()) : $main->the_post();
?>
    <div class="post">
        <h3><?php the_title(); ?></h3>
        <em class="postMetaData">Posted under <?php the_category(', '); ?>.</em>
        <div class="entry">
            <?php the_content('<br />Read complete article'); ?>
        </div>
    </div>
<?php endwhile; ?>

posts_per_page - это именно то, что есть... Когда вы добавляете следующую и предыдущую страницы, это переопределяет то, что вы установили в WP-Admin. У меня есть 3 в качестве значения по умолчанию, и меня не беспокоит, поэтому я сделал его 5 для основного столбца. смещение. Помните, как я сказал, что нам нужно не показывать первый пост, потому что у нас уже есть его в избранном разделе сообщений. cat = -59 - Нам нужно указать, какая категория не включать - theirNews - и для меня он имеет идентификатор 59. «-» прямо перед номером в основном рассчитывается на исключение.

Итак, это все код HTML и WordPress, который нам нужен. Он по-прежнему будет выглядеть обычным, но у него будет общая 3-х столбчатая компоновка, которой мы пользуемся!

Шаг 4 - CSS

Теперь, поскольку весь наш макет в значительной степени сделан, это в основном только стиль, который необходим! Загрузите весь этот CSS и вставьте его в свой style.css. Есть несколько вещей, которые переопределяют код по умолчанию 960. Нам не нужно использовать! ВАЖНО, потому что новый код на самом деле выше иерархической лестницы, чем код 960. Мы используем код 960 как своего рода «базу», из которой мы строим. Если вы украшаете фундамент дома, вы все еще видите исходные фонды? Это «украшение» в основном относится к заголовкам, но некоторые общие стили используются для текстового контента и т. Д. Одним из основных переопределений является шрифт тела. Мы указываем Грузию, когда дефолтом по сути является Helvetica. Шрифты действительно соответствуют вашим предпочтениям, я просто использовал Грузию, чтобы быть другим! После того, как вы вставили и прочитали весь CSS, передняя страница должна выглядеть полной!

Шаг 5 - Файлы подфайлов (необязательно)

Я включаю только этот раздел, поэтому у меня не возникает вопросов о том, почему отдельные страницы возвращают информацию, которая должна быть на главной странице! Таким образом, наша индексная страница имеет 3 столбца. Но что бы вы заполнили 3 столбца на определенной отдельной странице? Все что пожелаете! Хотя я бы предложил содержание сообщения... Поэтому я расскажу, как работают page.php и single.php, если вы хотите расширить тему. Если вы хотите разбить index.php на заголовок, боковую панель и нижний колонтитул, сделайте это сейчас! В противном случае мы выйдем дальше:

    Откройте single.php. Скопируйте весь код из index.php в файл single.php. Прокрутите вниз до тех пор, пока вы не соберете их. Удалить весь div. В то время как вы на нем, удалите отмеченные сообщения тоже! Все, что у вас осталось, - div # main.grid_5. Измените 5 на 9, чтобы компенсировать 4 столбца, от которых мы только что избавились. Не забудьте изменить комментарий в конце div, чтобы вы не запутались позже!

Итак, теперь у вас должен быть пустой главный столбец. Мы собираемся заполнить это регулярным циклом:

<?php if(have_posts()) : while(have_posts()) : the_post();?>
    <div class="post">
        <h2><?php the_title(); ?></h2>
        <em class="postMetaData">Posted under <?php the_category(', '); ?>.</em>
        <div class="entry">
            <?php the_content('Read complete article'); ?>
        </div>
    </div><!-- end div.post -->
<?php endwhile; ?>
<?php endif; ?>

Naw... Обычная старая расточка. Не стесняйтесь использовать эту единственную страницу до того, что вы хотите, чтобы ваши отдельные сообщения выглядели. Это обеспечивает базовый шаблон для WordPress для отображения одного сообщения.

Шаг 5 Часть 2

Итак, это единственный пост, но у нас все еще есть ссылки на отдельные страницы в навигации и нижнем колонтитуле. Если вы нажмете их, они вернутся так же, как индекс. Не круто. Все, что нам нужно сделать, это скопировать все, от одного до страницы.php, и должно быть сладким. Легко? Эти страницы должны выглядеть примерно так:

Оберните

Итак, вы только что взглянули на то, что может сделать WP_Query. Я настоятельно рекомендую посетить страницу Документов сообщений Query, которая имеет все те же параметры, что и WP_Query. Вы можете сузить цикл до любого конкретного сообщения, используя любую комбинацию параметров, разделенных символом &.

Надеюсь, вы, ребята, так же веселились, как я создаю газетную тему! Вы можете посмотреть конечный продукт здесь! Наслаждайтесь!