Wordpress. Posts loop
Today we will print posts of our blogs in our theme template. For this purpose we will use some wordpress functions.
For posts output:
- have_posts() – checks, if there are some posts for output.
- the_post() – loop counter
- the_title() – print post title
- the_content() – print post content
Also we print some meta information about posts – image preview, author nick and publish data. For these purposes we will use the_post_thumbnail(), the_author() and the_date() functions.
Code lesson (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;
}
add_action('wp_enqueue_scripts', 'loadScripts');
add_filter('nav_menu_css_class', 'changeMenuItemsClass');
add_filter('nav_menu_link_attributes', 'addLinkClass');
register_nav_menu("main-menu", "Главное меню");
add_theme_support('post-thumbnails');Code lesson (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>
<?php get_footer(); ?>
0 Comments