Осъществяване на началната страница на вашия WordPress сайт, подобен на корицата на списанието, всичко за WordPress

Много теми списание WordPress генерират начална страница, което обикновено се показва като много различно съдържание.

Но какво, ако искате да направите начална страница за списанието, което ще прилича на, да речем, това списание?

В тази статия ще ви покажем как да създадете страница в списание стила, който ще работи за всички устройства. Всички сме запознати с декорация на списания: голяма фоново изображение, допълнена от внимателно подредени позиции с различни размери.

Въпреки факта, че този подход работи в офлайн света, в този формат е много рядко в онлайн списание, което е много изненадващо, особено като се има предвид продължаващия растеж в използването на таблети и преносими устройства.

В тази статия ще разгледаме как да се приложи на корицата на списанието за собствения си уебсайт, който ще работи на всички платформи.

Забележка: данните от изпитванията, използвани в тази статия са предоставени от wptest.io.

Създаване на ваша собствена страница за корица на списание

Решението се основава на използването на приставка, която заменя шаблона, който се използва при генерирането на началната страница, както и при условие, че всички нишки поддържат използването на статична страница като майстор. Приставката също предоставя кратък номер да се определят заглавията и да добавите произволен CSS код за изход.

Стъпка 1. Инсталирайте приставката.

Приставката е достъпно на Github. Изтеглете цип файл и инсталирате като всеки друг плъгин, и след това да го активирате. Добавя нов Кратък, глава (описан в етап 2), и също така използва template_include филтър за презаписване шаблон, използван за генериране на началната страница.

Стъпка 2: Създаване на страница.

Трябва да зададете на кадър за страницата, като този образ ще бъде използван като корицата на заден план. Бъдете сигурни, че достатъчно голямо изображение (изображението, което е представено в примера е с площ от 900 пиксела от 1363 пиксела), е избран за корицата.

За да добавите заглавия, можете да използвате SHORTCODE [заглавие], което се извършва чрез следните признаци:

• Тип: се добавя към генерирания DIV елемент като клас, можете да определите в CSS.
• Id: запис ID или списък на идентификатори, разделени със запетая. Н2 елемент се създава за всеки идентификатор, като се използва подходящия заглавието влизане и Постоянна.
• Снимка: определя дали изходът за записване на екрана миниатюра. Стойността може да бъде или да, или не, задайте по подразбиране не.
• Текст: запис заглавие може да се замени, като се посочва в новия текст. Можете да посочите списък на заглавията, разделени със запетая, ако е необходимо.

ще се генерира по-долу HTML-маркиране:

Добавете толкова титли, колкото искате, и след това се публикува на страницата.

Стъпка 3. Изберете новата страница като статично началната страница.

Отворете секцията Настройки - Четене и изберете статична страница в изходните параметри на главната страница. Изберете новата си страница от падащия списък.

След установяване на статична страница, отидете на главната страница на сайта си.

Стъпка 4: Конфигуриране на CSS.

В зависимост от вашата подготовка и дължината на заглавията си, може да се наложи да промените CSS, за да изиска от компетентния позициониране. Можете дори да се наложи да се промени почти всичко, от корица до корица.

Има няколко начина за персонализиране на CSS:

• Персонализирани полета - създайте персонализиран поле на страницата, озаглавена custom_css и поставят CSS кода в полето за стойност (стойност). Ако плъгина намери това персонализирано поле на страницата, тя ще се пренесе на стойността в маркер стил и поставете кода в HTML. Използването на произволно поле позволява да приложи стиловете за страницата.
• Редактиране style.css - можете директно да редактирате CSS-файл в хранилището на плъгини.

Приставките за добавяне на произволни CSS стилове няма да работи, тъй като моделът е минималистичен и не поддържа общи действия и филтри като wp_head и wp_footer.

фоновото изображение се добавя към шаблона за cover.php. Тя добавя необходимите CSS стилове в файловете на заглавните:

Тази проста техника помага да се уверите, че изображението винаги ще се показва на цял екран за всички платформи:

Какво промяна?

Замяна на СГО не е толкова трудно. Както вече бе споменато по-горе, всеки от колекторите за кратките превръща в DIV елемент с класа, посочен в атрибута тип, който съдържа h2 за всеки запис.

Местоположение Разделение е лесна задача - просто използвайте абсолютно позициониране и определя съответните стойности на върха, надясно, надолу и наляво. За промяна h2 изглед, използвайте CSS правилото на h2 (от заглавието свързан с връзката):

Уникален идентификационен номер на CSS - това # сайт заглавие. Заглавие на вашия сайт автоматично ще бъде получено и показва в горната част на екрана.

Ако погледнете във файла style.css, ще видите, че съм пазил всичко доста прости, като се използва%, доколкото е възможно, включително и размера на шрифта. Това, разбира се, най-простият подход, но това ви дава възможност да се уверите, че страницата ще изглежда по същия начин за настолни компютри, така и таблети, мобилни устройства и т.н.

Можете също да промените фоновото изображение в която и CSS. Можете да промените изображението, за извеждане на няколко устройства, тя се коригира чрез промяна на ориентацията.

Направи главната страница на недвижими корицата на списанието!

Като се има предвид, че е невъзможно да се излезе с обща стил лист, който е подходящ за всички ситуации, и като се вземе предвид факта, че на корицата винаги ще се различават от въпрос за издаване, аз не стане твърде затвори на CSS.

Шансовете са, Вие (или Вашият дизайнер) може да се създаде по-напреднали CSS код и да персонализирате шаблона себе си, cover.php.