vedernickov.ru

свободное место

Дорабатываем свою тему оформления сайта.

Скачать архив с заготовкой здесь

Внесём ещё изменения в шаблон нашей темы.

В файлах index.php (основной файл).  single.php (файл записей, заметок). page.php (страница сайта).

Добавляем по два блока topnav и sectionBottom, под шапкой и перед футером (подвалом). Выделяю зелёным, чтобы вы визуально увидели. На самом деле тему можно менять как угодно и блоки вставлять в любое место. Я показываю только в качестве примера.
index.php



<!doctype html>
<html <?php language_attributes(); ?>>
<?php get_header(); ?>
<div class="topnav"></div>
<article id="article">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="box">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else : ?>
<p>Извините, записи не были найдены!</p>
<?php endif; ?>

<div style="text-align:center;">
</div>
</article>
<div id="sectionBottom">
<?php posts_nav_link(' | ', 'Предыдущая', 'Следующая'); ?><br>
</div>
<nav id="nav">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</nav>
<div id="aside">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div>
<?php get_footer(); ?>
 

page.php


<!doctype html>
<html <?php language_attributes(); ?>>
<?php get_header(); ?>
<div class="topnav"></div>
<article id="article">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"></a></h2>
<?php the_content(); ?>
Автор: <?php the_author(); ?>
<p><?php the_tags(); ?></p>
<?php endwhile; else : ?>
<p>Извините, записи не были найдены!</p>
<?php endif; ?>
</article>
<div id="sectionBottom">
<?php next_post_link('%link', 'Следующая статья из категории', true); ?><br>
</div>
<nav id="nav">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</nav>
<div id="aside">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div>
<?php get_footer(); ?>
 

single.php


<!doctype html>
<html <?php language_attributes(); ?>>
<?php get_header(); ?>
<div class="topnav"></div>
<article id="article">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"></a></h2>
<?php the_content(); ?>
Автор: <?php the_author(); ?>
<p><?php the_tags(); ?></p>
<?php endwhile; else : ?>
<p>Извините, записи не были найдены!</p>
<?php endif; ?>
</article>
<div id="sectionBottom">
<?php next_post_link('%link', 'Следующая статья из категории', true); ?><br>
</div>
<nav id="nav">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</nav>
<div id="aside">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div>
<?php get_footer(); ?>
 

В этих блоках можно размещать всё, на ваше усмотрение, я размещу меню и навигацию.

Теперь меняем стили. Я размещу весь файл стилей и в нём выделю зелёным эти блоки.

Красным цветом выделю изменённую форму поиска и боковые панели (сайдбары).

style.css код:

/*
Theme Name: MyNewNytheme
Author: Vedernickov Sergey Nikolaevich gorod Saratov
Author URI: https://www.vedernickov.ru
Description: Мой первый адаптивный шаблон WordPress, MyNewNytheme
Version: 1.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/*-----------------------сетка сайта, расположение блоков-------------------*/
body {
display: grid;
grid-template-areas:
"header header header"
"topnav topnav topnav"
"nav article aside"
"sectionBottom sectionBottom sectionBottom"
"footer footer footer";

grid-template-rows: .1fr .1fr 1fr .1fr .1fr;
grid-template-columns: .5fr 1fr .5fr;
grid-row-gap: 2px;
grid-column-gap: 2px;
height: 100vh;
margin: 0;
background: #ffffff;
}
/* мобильная версия/viewports. */
@media all and (max-width: 800px) {
body {
grid-template-areas:
"header"
"topnav"
"article"
"nav"
"aside"
"sectionBottom"
"footer";
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
height: 100vh;
margin: 0;
background: #cccccc;
}
}
/*--------------------------шапка---------------------------------*/
.header {
grid-area: header;
background: #2271b1;
text-align: center;
height: 50px;
margin: 0;
}
.header a{
color: #ffffff;
}
/*---------------------------подвал--------------------------------*/
#footer {
grid-area: footer;
background: #000000;
text-align: center;
color: #ffffff;
padding: 15px;
text-align: center;
}
/*-------------------------------тело сайта----------------------------*/
#article {
grid-area: article;
background: #ffffff;
color: #222222;
padding: 10px;
}
/*--------------------------левый сайдбар---------------------------------*/
#nav {
grid-area: nav;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
text-align: left;
margin: 1px;
padding: 4px;
}
#nav h2 {
font-size: 20px;
text-align: center;
}
/*------------------------------правый сайдбар-----------------------------*/
#aside {
grid-area: aside;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
text-align: left;
margin: 1px;
padding: 4px;
}
#aside h2 {
font-size: 20px;
text-align: center;
}
/*--------------------верхняя и нижняя дополнительная панель---------------------------------------*/
div.topnav {
grid-area: topnav;
background: #000000;
text-align: left;
color: #ffffff;
height: 50px;
/*width: 100%;
transition: width .1s, height .1s;
*/
}
div.topnav a {
color: #ffffff;
font-size: 16px;
font-weight: normal;
}

div#sectionBottom {
grid-area: sectionBottom;
background: #2271b1;
text-align: center;
color: #ffffff;
padding: 1em;
}
div#sectionBottom a {
text-align: center;
color: #ffffff;
}
/*-----------------------------------------------------------*/
h1 {
font-size: 22px;
font-weight: bold;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
h2 a {
text-decoration: none;
}
h3 {
font-size: 18px;
text-decoration: none;
}
h3 a {
text-decoration: none;
}
h4 {
font-size: 16px;
text-decoration: none;
}
h4 a {
text-decoration: none;
}
a {
color: #3f5f7c;
text-decoration: none;
}
ul {
text-decoration: none;
list-style-type: none;
}
li {
text-decoration: none;
list-style-type: none;
}
body,
button,
input,
select,
textarea {
color: #404040;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
word-break: break-word;
/*word-break: break-all;*/
background: white;
}
#aside a{
color: #3f5f7c;
padding: 8px;
}
#aside h2{
padding: 5px;
color: #333333;
background: #ffffff;
text-align: center;
margin: 8px;
box-shadow: 0 0 15px #cccccc;
}
#nav a{
color: #3f5f7c;
padding: 8px;
}

#nav h2{
padding: 5px;
color: #333333;
background: #ffffff;
text-align: center;
margin: 8px;
box-shadow: 0 0 15px #cccccc;
}
/* Оформление стандартного поиска ВордПресс */

#searchform{ /* вся форма */
margin-top: 10px;
background: #ffffff;
padding: 1%;
width: 87%;
margin: 5%;
border-radius: 5px;
border: 2px solid #cccccc;
box-shadow: 0 0 15px #cccccc;
}
#searchform input[type="text"]{ /* поле ввода */
padding: 1%;
width: 75%;
border: 1px solid #ffffff;
text-align: center;
}
#searchform input[type="submit"]{ /* кнопка */
width: 29px;
border: 1px solid #ffffff;
font-size: 18px;
}
div.box{
border-radius: 4px;
box-shadow: 0 0 8px #cccccc;
font-size: 16px;
padding: 8px;
margin: 2%;
}

Теперь осталось добавить кусок кода в файл functions.php копируем в самый низ:


//стилизуем форму поиска
//
//
function my_search_form( $form ) {
$form = '
<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<input type="text" placeholder="Поиск по сайту..." value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="🔍" />
</form>';
return $form;
}
add_filter( 'get_search_form', 'my_search_form' );
//
//

Если не получается, то архив с заготовкой в начале записи. Вот так должен выглядеть сайт:

Предыдущая запись по теме здесь

 

Автор: admin

Метки: , , , , , , ,

2 комментария на «“Дорабатываем свою тему оформления сайта.”»

  1. Спасибо за статью мне пригодилось.

    • Очень много труда было с разметкой, всё ползло у всех в разные стороны. Сетка рулит.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.