vedernickov.ru

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

Своя тема Вордпресс запись № 2

Разделяем нашу заготовку файлы и вставляем куски кода cms WordPress, для того чтобы наш сайт заработал:

Создаём файл основной файл index.php  с таким содержанием

<!doctype html>
<html <?php language_attributes(); ?>> 
<?php get_header(); ?>
<article id="article">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?>
<?php endwhile; else : ?>
<p>Извините, записи не были найдены!</p>
<?php endif; ?>
<div style="text-align:center;">
</div>
</article>
<nav id="nav">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</nav> 
<div id="aside">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</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"
"nav article aside"
"footer footer footer";

grid-template-rows: .1fr 1fr .1fr;
grid-template-columns: .5fr 1fr .5fr;
grid-row-gap: 2px;
grid-column-gap: 2px;
height: 100vh;
margin: 0;
background: #ffffff;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 800px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"aside"
"footer";
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
height: 100vh;
margin: 0;
background: #cccccc;
}
}
.header {
grid-area: header;
background: #cccccc;
}
#footer {
grid-area: footer;
background: #cccccc;
}
#article {
grid-area: article;
background: #cccccc;
}
#nav {
grid-area: nav;
background: #cccccc;
}
#aside {
grid-area: aside;
background: #cccccc;
}
/*-----------------------------------------------------------*/

 

Далее создаём файлы page.php и single.php пока с одинаковым содержанием, страницы и записи, потом их можно дополнить по вашему усмотрению.

<!doctype html>
<html <?php language_attributes(); ?>>
<?php get_header(); ?>
<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>
<nav id="nav">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</nav> 
<div id="aside">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div> 
<?php get_footer(); ?>

Следующий файл шапка сайта header.php

 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?> &raquo; 
<?php is_front_page() ? bloginfo('description') : wp_title(''); ?>
</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head> 
<body <?php body_class(); ?>>
<div class="header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a>
</div>

 

Дальше файл function.php я сделал 4 сайдбара для виджетов (это для разных мест блоков и рекламы)

На главной странице выводим 1 и 2 сайбар, на остальных 3 и 4.

 

<?php
// Эта функция помещает файл Normalize.css в очередь для использования. Первый параметр это имя таблицы стилей, второе это URL. Здесь мы
// используем онлайн версию css файла.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
// Регистрирует новую боковую панель под названием 'sidebar'
function add_widget_Support() {
register_sidebar( array(
'name' => 'sidebar-1',
'id' => 'sidebar-1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => 'sidebar-2',
'id' => 'sidebar-2',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'sidebar-3',
'id' => 'sidebar-3',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => 'sidebar-4',
'id' => 'sidebar-4',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Подхватывает(hook) инициацию виджета и запускает нашу функцию
add_action( 'widgets_init', 'add_Widget_Support' );
// Регистрирует новое навигационное меню
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Подхватывает (hook) init хук-событие, запускает функцию нашего навигационного меню
add_action( 'init', 'add_Main_Nav' );
// убрать точки в анонсе [...]
function trim_excerpt($text) {
return rtrim($text,'[&hellip], [...]');
}
add_filter('get_the_excerpt', 'trim_excerpt');
/*-------------------------expert-------------------------------------------------------*/
add_filter( 'excerpt_more', 'new_excerpt_more' );
function new_excerpt_more( $more ){
global $post;
return '<a href="'. get_permalink($post) . '"> ... читать полностью</a>';
}
add_filter( 'excerpt_length', function(){
return 30;
} );

 

Далее боковые колонки sidebar.php

 

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>

 

Это код вставки сайдбара, просто вставить и изменить цифру от 1 до 4

 

<div id=»aside»> <?php dynamic_sidebar( ‘sidebar-2’ ); ?> </div>

 

И пока последний файл, низ сайта, подвал  footer.php

 

<div id="footer">
<p>Copyright &copy; 2020 - <?php echo date('Y'); ?></p>
<?php wp_footer(); ?>
</div>
</body>
</html>

 

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

 

 

 

Скачать NewMyTheme.

Проверяем адаптивность сайта  http://iloveadaptive.com/ru/

 

Проверяем скорость сайта для мобильных устройств и компьютеров. https://pagespeed.web.dev/

Проверяем страницы на валидность разметки. https://validator.w3.org/

Здесь есть 3 предупреждения, выделенных жёлтым цветом, это уже в самой CMS. Там пока не копаемся.

Продолжение смотреть здесь.

Автор: admin

Метки: , , , , ,

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

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

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