Wordpress. Создание темы. Форма поиска
Сегодня мы реализуем вывод боковой панели сайта с виджетами, а также настроим форму поиска на сайте, ориентируясь на выбранный нами шаблон.
Чтобы вывести боковую панель сайта, нам нужно зарегистрировать ее и вывести в шаблоне. Для регистрации новой боковой панели мы будем использовать функцию register_sidebar(). После этого нужно добавить функцию регистрации сайдбара к хуку widgets_init.
Для вывода сайдбара следует использовать функцию dynamic_sidebar().
Далее мы настроим форму поиска в стандартном виджете поиска. Для этого нам нужно создать новый файл темы — searchform.php.
Для вывода сайдбара следует использовать функцию dynamic_sidebar().
Далее мы настроим форму поиска в стандартном виджете поиска. Для этого нам нужно создать новый файл темы — searchform.php.
Код урока (index.php)
<?php get_header(); ?>
<div class="col-md-8">
<h1 class="my-4">Page Heading<small> Secondary Text</small></h1>
<?php
if(have_posts()) {
while(have_posts()) {
the_post();
?>
<div class="card mb-4">
<?php the_post_thumbnail('', $default_attr); ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"><?php the_content(); ?></p>
</div>
<!-- <div class="card-footer text-muted">
<?php //the_author(); ?>
<?php //the_date(); ?>
</div> -->
<div class="card-footer text-muted">
Добавлено <?php the_date(); ?> автором <a href="#"><?php the_author(); ?></a>
</div>
</div>
<?php }
}
?>
</div>
<div class="col-md-4">
<?php dynamic_sidebar('right-sidebar'); ?>
</div>
<?php get_footer(); ?>Код урока (functions.php)
<?php
$default_attr = array(
'class' => 'card-img-top'
);
function loadScripts() {
wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri(). '/css/bootstrap.min.css' );
wp_enqueue_style( 'main-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'bsscript', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ), '20150330', true );
}
function changeMenuItemsClass($class) {
$classes[] = "nav-item";
return $classes;
}
function addLinkClass($attrs) {
$attrs['class'] = 'nav-link';
return $attrs;
}
function modifyReadMoreLink() {
return '<p><a class="btn btn-primary" href="' . get_permalink() .'">Читать далее</a></p>';
}
function createWidgetsArea() {
register_sidebar(
array (
'name' => 'Справа',
'id' => 'right-sidebar',
'before_widget' => '<div class="card my-4">',
'after_widget' => '</div>',
'before_title' => '<h5 class="card-header">',
'after_title' => '</h5>'
)
);
}
add_action('wp_enqueue_scripts', 'loadScripts');
add_filter('nav_menu_css_class', 'changeMenuItemsClass');
add_filter('nav_menu_link_attributes', 'addLinkClass');
add_filter('the_content_more_link', 'modifyReadMoreLink');
add_action('widgets_init', 'createWidgetsArea');
register_nav_menu("main-menu", "Главное меню");
add_theme_support('post-thumbnails');Код урока (searchform.php)
<div class="card-body">
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="text" name="s" class="form-control" value="<?php echo get_search_query(); ?>" placeholder="Search for...">
<span class="input-group-btn">
<input type="submit" value="Поиск" class="btn btn-secondary">
</span>
</div>
</form>
</div>
0 Комментариев