Wordpress как задать главную страницу
Перейти к содержимому

WordPress как задать главную страницу

  • автор:

Как сделать главную страницу в WordPress

Как сделать главную страницу в WordPress

Для того, чтобы нужную вам страницу в WordPress назначить стартовой (главной) или любую другую страницу назначить для вывода статей вашего блога, нужно перейти в Настройки -> Чтение.

Как сделать главную страницу в WordPress

Как сделать любую страницу главной (стартовой) в WordPress

После того как вы перешли в настройки чтения выберите пункт «Статическую страницу». Далее выберите страницу, которую вы хотите использовать как главную страницу.

Как сделать любую страницу главной (стартовой) в WordPress

Назначаем страницу «Главная» для главной страницы сайта

Как создать отдельную страницу для записей блога в WordPress

Для того чтобы назначить страницу для вывода всех записей (статей, новостей) вашего сайта на WordPress выберите в пункте «Страница записей» ту страницу, которою вы хотите использовать для вывода записей.

Как сделать любую страницу главной (стартовой) в WordPress

Назначаем страницу «Блог» для отображения записей

Не забудьте сохранить изменения нажав кнопку «Сохранить изменения».

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

Для того, чтобы нужную вам страницу в WordPress назначить стартовой (главной) или любую другую страницу назначить для вывода статей вашего блога, нужно перейти в Настройки -> Чтение. Как сделать любую страницу главной (стартовой) в WordPress После того как вы перешли в настройки чтения выберите пункт «Статическую страницу». Далее выберите страницу, которую вы хотите использовать как главную страницу. Как создать отдельную страницу для записей блога в WordPress Для того чтобы назначить страницу для вывода всех записей (статей, новостей) вашего сайта на WordPress выберите в пункте «Страница записей» ту страницу, которою вы хотите использовать для…

Обзор

Проголосуйте за урок
Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Как в WordPress сделать страницу главной

Как в WordPress сделать страницу главной

В этой статье мы рассмотрим вариант, как сделать нужную нам страницу — главной страницей сайта. Тут не будет кода, все будем делать через админку WordPress.

По умолчанию в Вордпрессе на главной странице сайта выводятся публикации (записи). Но мы хотим это изменить.

Как изменить главную страницу в WordPress?

Шаг №1. Создаем новую страницу:

Прописываем любое название, хоть Главная, хоть Home — без разницы. И жмем опубликовать:

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

Итак, страницу создали (к слову, не обязательно создавать новую страницу, можно выбрать уже готовую) , опубликовали, что дальше?

Шаг №2. Переходим в раздел Настройки → Чтение

Далее, обращаем внимание на подзаголовок «На главной странице отображать». И там меняем выбор на Статическую страницу. И напротив «Главная страница» выбираем нашу только что созданную страницу.

Выбор главной страницы в WP

Жмем на кнопку «Сохранить изменения» и все! Главная страница изменена.

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

Изменение главной страницы по умолчанию

Главная страница по умолчанию — это страница, которую тема по умолчанию использует в качестве главной страницы вашего сайта (и именно этот макет демонстрируется при предварительном просмотре темы).

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

В этом руководстве

  1. Когда нужно изменять шаблон главной страницы по умолчанию
  2. Доступ к шаблону главной страницы по умолчанию
  3. Знакомство с содержимым главной страницы по умолчанию
  4. Распространённые изменения
    1. Изменение демонстрационного изображения
    2. Изменение цвета фона
    3. Показывать содержимое
    Когда нужно изменять шаблон главной страницы по умолчанию

    Макет главной страницы по умолчанию можно полностью настроить в теме с редактором сайта. Вы поймёте, что выбрали тему с редактором сайта, если в разделе Внешний вид на панели администратора WordPress.com присутствует пункт «Редактор (бета-версия)».

    Эти темы полностью совместимы с редактором сайта.

    Затем нужно убедиться, что в разделе Настройки → Чтение панели администратора WordPress.com главная страница темы по умолчанию установлена в качестве главной страницы вашего сайта.

    Чтобы использовать главную страницу по умолчанию, сделайте следующее:

    1. На панели администратора WordPress.com перейдите в раздел Настройки →Чтение.
    2. Проверьте, чтобы на вашей главной странице отображались Последние записи (скоро этот элемент будет заменён на «Главная страница по умолчанию»)
    3. Сохраните изменения, нажав кнопку Сохранить изменения в нижней части экрана.

    В разделе Страницы на панели администратора появится главная страница и название шаблона, который для неё используется. Обычно шаблоны главной страницы по умолчанию включают указатель, главная страница или заставка.

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

    Доступ к шаблону главной страницы по умолчанию

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

    1. На панели администратора перейдите в раздел Внешний вид → Редактор.

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

    Знакомство с содержимым главной страницы по умолчанию

    Главная страница по умолчанию содержит несколько стандартных элементов (которые в редакторе WordPress называются блоками).

    Во-первых, важно понять, какие блоки уже входят в состав шаблона. Откройте представление В виде списка, чтобы увидеть список всех блоков шаблона. Представление В виде списка — значок в виде трёх горизонтальных линий в левом верхнем углу экрана.

    Стрелка указывает на кнопку «В виде списка», а под ней находится список блоков, обычно присутствующих в шаблоне главной страницы.

    Типичный шаблон главной страницы по умолчанию содержит следующие элементы:

    • Заголовок. Заголовок включает в себя такие элементы, как название сайта, логотип и меню. Заголовок — это часть шаблона, которая присутствует во всех разделах сайта. Поэтому любые его изменения будут применяться на всех страницах сайта, где присутствует шаблон заголовка.
    • Содержимое. Это коллекция блоков или шаблонов, которые будут отображаться только на главной странице и добавляются непосредственно в шаблон в редакторе сайта. Блоки, которые используются в области содержимого шаблона главной страницы, зависят от вашей темы. В отличие от других шаблонов в шаблоне главой страницы блок «Содержимое записи» не используется.
    • Подвал. В подвале содержатся такие элементы, как название сайта, контактная информация и ссылка на WordPress. Подвал — это часть шаблона, которая присутствует на каждой странице. Поэтому любые его изменения будут применяться на всех страницах сайта, где присутствует эта часть.

    Хотя все темы WordPress отличаются друг от друга, перечисленные выше элементы обычно входят в состав шаблона главной страницы большинства тем. Кроме того, в шаблоне главной страницы присутствуют и другие элементы, которые можно изменять по своему усмотрению. В следующем разделе мы рассмотрим несколько наиболее распространённых изменений, которые можно внести в шаблон главной страницы.

    Распространённые изменения
    Изменение демонстрационного изображения

    Демонстрационные изображения, входящие в состав темы, можно заменить на свои собственные. Выполните следующие действия:

    1. Откройте шаблон главной страницы для редактирования.
    2. Щёлкните изображение, которое требуется изменить.
    3. На появляющейся панели инструментов выберите Заменить.
    4. Щёлкните Выбрать изображение, чтобы выбрать существующее изображение, которое уже загружено в библиотеку медиафайлов, или загрузите новое изображение со своего компьютера.
    5. Сохраните изменения в правом верхнем углу редактора.
    Изменение цвета фона

    Если нужно изменить цвет фона страниц, измените шаблон главной страницы по умолчанию и выполните следующие действия:

    1. Используя представление В виде списка, выберите группу, содержащую все основное содержимое. Обычно она находится непосредственно под заголовком.
    2. В настройках блока «Группа» справа найдите опции Цвет.
    3. Измените цвет фона на нужный.
    4. Щёлкните «Сохранить» в правом верхнем углу экрана.

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

    Показывать содержимое

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

    1. На панели администратора WordPress.com перейдите в раздел Настройки →Чтение.
    2. Проверьте, чтобы на вашей главной странице отображались Последние записи (скоро этот элемент будет заменен на «Главная страница по умолчанию»)
    3. Сохраните изменения, нажав кнопку Сохранить изменения в нижней части экрана.

    Как создать главную страницу WordPress темы на чистом PHP

    В 2016 году я написал статью «Как создать главную страницу на WordPress на чистом PHP», которая сейчас уже потеряла свою актуальность. Да и для фрилансеров она была очень сложной. Связано это с тем, что даже из сайта на WordPress можно создать конструктор (типа Tilda) и делать страницы без знания HTML и CSS языков. Но на старом сайте эта статья приводила мне на сайт много трафика, так что я решил её оставить. Да и для понимания логики работы вордпресса статья будет полезна. Плюс есть люди, которые не любят плагины, так как они перегружают сайт. Чуть позже тут появится ссылка на статью о том, как создать главную на WordPress с помощью плагина Elementor. А пока что можете почитать эту статью или узнать подробнее об этом плагине в статье — Elementor для WordPress – Обзор функционала и настроек плагина

    Как создать главную страницу на WordPress без плагинов: пример из практики.

    Здравствуйте! Сегодня я хочу показать и рассказать Вам о том, как создать главную страницу на WordPress на чистом PHP на примере сайта моей хорошей знакомой, которая работает фотографом.

    Поставленная задача: Создать собственную главную страницу для сайта на WordPress без привязки к установленному шаблону сайта.

    Итак, для начала нам надо создать отдельный шаблон главной страницы. Для этого заходим в личный кабинет хостинга, на котором расположен Ваш сайт, либо подключаемся к нему по ftp. Здесь нам надо создать новый файл, который будет отвечать за внешний вид главной страницы. Файл создается согласно иерархии шаблонов WordPress.

    Иерархия шаблонов главной страницы на WordPress

    Иерархия шаблонов WordPress для главной страницы следующая:

    • front-page.php
    • home.php
    • index.php

    То есть при подключении к сайту на Вордпресс сначала ищется файл front-page.php. Если его нет, то ищется файл home.php. Если нет и его, то берется файл index.php.

    Таким образом создать шаблон главной страницы можно тремя способами:

    1. Создать файл front-page.php, если его нет в установленной на сайте теме, и работать уже только с ним.
    2. Создать файл home.php, если его нет, и делать все манипуляции с ним.
    3. Править исходный файл index.php

    Я выбрал второй способ, так как изменения я буду вносить постепенно. А это исключает первый способ, тк при создании пустой страницы front-page.php сайт автоматически будет открываться пустым. Плюс я хочу сохранить исходный шаблон главной страницы WordPress, поэтому редактировать файл index.php тоже не вариант.

    Если же вам надо внести только мелкие правки, то можете смело редактировать файл index.php или файл, отвечающий в вашей теме за главную страницу.

    Для редактирования не обязательно заходить на хостинг. Достаточно зайти в панель администратора вашего сайта -> Внешний вид -> Редактор и выбрать нужный файл в списке справа. Чуть ниже я покажу как это выглядит, когда создам свой шаблон.

    И еще, не обязательно называть файл именно home.php. Это просто имя файла, по которому в сами сможете понять, за что он отвечает. Главное, чтобы имя файла было на латинице. Я, например, свой файл назвал mainpage.php

    Создаем свой шаблон главной страницы

    Но вернемся к созданию файла. Его надо создать на хостинге в папке с установленной у вас на сайте темой. Чаще всего эта папка располагается по адресу:

    /public_html/wp-content/themes/название_темы/

    Не забудьте указать расширение файла .PHP Это нужно для того, чтобы php код внутри файла правильно работал.

    После того, как Вы создали файл, откройте его и впишите следующий код:

    Должно получиться так:

    Как создать главную страницу на WordPress: создаем свой шаблон

    Сохраняем и идем в админку сайта. А именно во вкладку «Внешний вид -> Редактор», где мы видим наш шаблон, который называется «Шаблон страницы: Главная страница»

    Как создать главную страницу WordPress темы на чистом PHP

    Добавляем шапку и подвал в шаблон

    Теперь нам надо добавить в шаблон шапку и подвал страницы.

    Шапка сайта (header) и подвал сайта (footer) нужны для того, чтобы страница имела цельный вид. Можно сказать, что это эдакие кавычки для страниц. Чаще всего они используются одни и те же для всего сайта. Меняется только то, что между ними.

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

    Этот код подключает к нашей страницы весь код из файла header.php, который и отвечает за шапку сайта.

    Аналогично же подключаем и подвал сайта. Для этого ниже пишем вот такую строчку:

    Этот код подключает к нашему шаблону код из файла footer.php, отвечающий за подвал.

    В итоге у нас получается такой шаблон

    Обложка статьи

    Определяемся со структурой нашей страницы

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

    • Сначала выводится цитата, то есть небольшой кусок текста. В нашем случае это будет приветственный текст.
    • Далее следует портфолио, чтобы показать нашего фотографа лицом.
    • Потом услуги, на которые делается ставка. Это и будет основной текст страницы
    • Блок с последними записями блога, которые так же будут выводиться автоматически.
    • И в конце выводим форму обратной связи

    Добавляем вывод отрывка в шаблоне

    Первым делом нам надо добавить вывод отрывка (раньше этот блок назывался цитатой, так что не обращайте внимание на скриншоты). Делается это с помощью вот такой строчки:

    Как создать главную страницу на WordPress: Вывод отрывка

    Если Вы хотите сразу видеть результат Ваших действий, то создавайте новую страницу и слева, в атрибутах страницы, выбирайте шаблон “Главная страница”. После этого сохраняете страницу и можно уже смотреть результат.

    Можно, конечно, и опубликовать эту страницу, но я этого не делаю, так как опубликованную страницу поисковики уже могут индексировать и добавлять к себе в поиск. И пусть это происходит не сразу, но зачем Вам, чтобы в поиске была тестовая страница?)

    Теперь нам надо проверить, как выводится наш отрывок и выводится ли он вообще. Для этого переходим на только что созданную страницу и сбоку ищем блок “Цитата”. После чего пишем туда свой текст и сохраняем страницу.

    Как создать главную страницу WordPress темы на чистом PHP

    Если этого блока нет, то надо подняться вверх страницы и найти там “Настройки экрана”. После чего нажать на нее и поставить галочку возле пункта “Цитата”. Теперь блок с цитатой у Вас появился.

    Как создать главную страницу WordPress темы на чистом PHP

    Если же у вас нет такого пункта, значит установленная тема не поддерживает их вывод. Но и это не проблема. Давайте научим ее этому. Для этого идем в “Внешний вид” -> Редактор и ищем справа файл “Функции темы (function.php)” И в конце файла вставляем вот такой код:

     function my_custom_init() < add_post_type_support( 'page', 'excerpt' ); >add_action('init', 'my_custom_init');  

    Как создать главную страницу WordPress темы на чистом PHP

    Сохраняем файл, возвращаемся на редактируемую страницу и видим, что это блок появился. Если нет, то ставим галочку в “Настройках экрана” вверху страницы.

    Выводим портфолио

    Вывод портфолио ничто иное, как вывод определенных страниц. Поэтому мы используем такой код:

     ?php $pages = get_pages(array('include' => &lsquo;316,153,22,2,11,19&rsquo;)); ?>  

    Переменной $pages присваиваем функцию get_pages, которая отвечает за вывод страниц, а саму функцию заставляем показывать только страницы с определенным ID

    Начало и конец списка страниц, которые мы выводим.

    функция, которая отвечает за перебор массивов, которые мы опишем ниже.

    Начало и конец пункта списка.

     ID, 'thumbnail'); ?>  

    функция, отвечающая за вывод миниатюры страницы.

     <h4>post_title; ?></h4>   

    Вывод заголовка страницы размером H3 и ссылкой на неё.

    заканчиваем перебирать массивы одного пункта списка и переходим к следующему. Перебор осуществляется по всем указанным ID

    Как создать главную страницу на WordPress: Выводим портфолио

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

    Как создать главную страницу WordPress темы на чистом PHP

    Добавляем основной текст страницы

    Теперь нам надо, чтобы шаблон выводил наш основной текст, который мы пишем в главном блоке страницы. В моем случае вот этот:

    Как создать главную страницу WordPress темы на чистом PHP

    Для этого нам в шаблоне надо добавить вот такой код:

    Проверяем есть ли вообще запись и пока есть, считывает текст из записи.

    Выводим весь текст из записи

    Закрываем циклы Если(IF) и Пока (WHILE), открытые в первой строке.

    Как создать главную страницу WordPress темы на чистом PHP

    Причем если вставить только вторую строчку кода, то она ничего не выведет, потому что не будет знать что вообще выводить.

    И в итоге наша страница сейчас выглядит так:

    Как создать главную страницу WordPress темы на чистом PHP

    Выводим последние записи блога

    В установленной на сайте теме записи блога отображаются вот так:

    Как создать главную страницу на WordPress: вывод записей блога

    Из-за этого, в принципе, тогда и был выбран именно этот шаблон. Ведь у нас сайт фотографа и главное на нем— это его фотографии.

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

    В этом коде:
     have_posts()) : $recent->the_post();?>  

    Функция, отвечающая за вывод постов. Здесь надо обратить внимание на cat=4 (отвечает за то, из какой категории брать посты) и showposts=3 (сколько последних постов выводить)

    Начало — конец пункта списка

     "post_thumbnail"));> ?>  

    Вывод миниатюры записи (если она есть). (300, 300) — размеры миниатюры по большей стороне, а «class»=>«post_thumbnail» — какой класс присвоить каждой миниатюре для дальнейшей работы с ними при CSS оформлении.

    Вывод заголовка записи с ссылкой на неё.

    Заканчиваем перебор записей.

    Сбрасываем все настройки цикла, чтобы они не перешли на другие циклы на этой странице.

    Как создать главную страницу WordPress темы на чистом PHP

    В итоге у нас получается такая страница

    Как создать главную страницу WordPress темы на чистом PHP

    Вывод формы обратной связи

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

    Форма обратной связи у нас выводится через плагин Contact Form 7. Так что нам надо лишь вставить ее в наш шаблон. О том, как создавать эту форму и использовать ее я в этой статье останавливаться не буду, итак очень большой она получается, так что если Вы не знаете, как это сделать, то нажмите на название плагина в начале этого абзаца.

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

    do_shortcode — функция, которая умеет читать шорткоды. PHP этого делать не умеет, поэтому если Вы вставите шорткод без этой функции, то он работать не будет.

    (‘[contact-form-7 > — сам шорткод, который надо выполнить на php странице.

    В итоге весь код нашего шаблона главной страницы выглядит вот так:

    А страница без оформления выглядит вот так

    Как создать главную страницу WordPress темы на чистом PHP

    Оформляем страницу

    Наконец-то переходим к самому интересному. А именно к оформлению всего этого безобразия в чему-то более менее приятному.

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

    Я добавил эти классы к коду выше и теперь могу показать финальный код шаблона главной страницы на WordPress. Вот он:

    Как создать главную страницу WordPress темы на чистом PHP

        • Класс mainpage я задал всей странице
        • Класс excerpt — блоку с цитатой
        • Класс portfolio — блоку с портфолио
        • Класс uslugi — блоку, в котором выводится основной текст страницы
        • Класс lastnews — блоку с последними записями блога
        • Класс mainform — блоку с формой обратной связи

        А вот какой CSS-код я использовал:

         .mainpage /*Устанавливаем внешние отступы со всех сторон в 3% от ширины экрана*/ .mainpage h2 /*Выравнивание всех заголовков H2 на странице по центру*/ .portfolio /*Сверху и снизу блока с портфолио сделаем отступы по 20 пикселей, а по бокам доверим это дело браузеру*/ .portfolio ul /*Задаем автоматическое отображение всего контента списка в блоке и выравниваем его по центру*/ .portfolio li /*Расставляем все пункты списка в ряд; Задаем каждому пункту ширину в 17em; Задаем нулевые отступы сверху и снизу, а по бокам автоматические отступы; Позиционируем каждый пункт списка слева от следующего пункта списка. */ .portfolio h3 /*Задаем размер шрифта текста в блоке портфолио в 14 пикселей и отодвигаем их на 15 пикселей вниз от фотографий*/ .lastnews ul .lastnews li .cena .cena p .trening .cena a.btn < /*Стилизуем кнопку &ldquo;Оставить заявку&rdquo; */ font-weight: 700; /*Задаем насыщенность текста в 700 у.е.*/ color: white; /*Цвет текста белый*/ text-decoration: none; /*Без подчеркивания*/ padding: .8em 1em calc(.8em + 3px); /*Внутренние отступы текста от границ кнопки*/ border-radius: 3px; /*Закругленные углы в 3px*/ background: rgb(64,199,129); /*Цвет самой кнопки*/ box-shadow: 0 -3px rgb(53,167,110) inset; /*Тень*/ transition: 0.2s; /*Время задержки анимации в 0,2 секунды*/ >a.btn:hover < background: rgb(53, 167, 110);color: #fff;>/*Псевдокласс hover отвечает за то, каким станет кнопка при наведении курсора, так что тут мы немного затемним фон кнопки, а цвет текста оставим без изменения */ a.btn:active < /*Псевдокласс active отвечает за то, каким станет кнопка при нажатии на нее. */ background: rgb(33,147,90); box-shadow: 0 3px rgb(33,147,90) inset; >  

        И в итоге наша страница становится такой:

        Как создать главную страницу на WordPress: пример конечного результата

        Устанавливаем нашу страницу в качестве главной

        Теперь нам надо сделать нашу тестовую страницу главной страницей сайта. Для этого мы первым делом меняем заголовок нашей страницы с “Тестовой” на любой другой. Я пока заменил его просто на “Главная”.

        После этого опубликовываем нашу страницу и идем в “Настройки” — “Чтение”, где выбираем из выпадающего списка нашу страницу “Главная”.

        Как создать главную страницу на WordPress

        Сохраняем и всё, работа закончена. Мы молодцы!

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

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

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