Я только начинаю WordPress, поэтому мой вопрос может показаться немного простым для некоторых из вас, но я не могу найти, как заставить его работать.
Я создаю страницу блога на WordPress,и я хотел бы отобразить первое сообщение не так, как другие, затем отобразить некоторый статический текст, а затем продолжить цикл сообщений со 2-го сообщения.
Моя вторая проблема заключается в том, что мне нужно поместить эскиз внутриDiv в абсолютном положении (сейчас, это странно уменьшается, когда я изменяю размер браузера).В моем прототипе начальной загрузки я поместил изображение в div и использовал свойство background для импорта изображения.Каков наилучший способ заменить это поведение с помощью WordPress?
Я сделал быстрый набросок для этого:
IЯ искал на stackoverflow и пробовал некоторые фрагменты, но я не могу заставить ни один из них работать.
Кстати, я использую тему UNDERSTRAP в качестве шаблона.
Вот мой код index.php:
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package understrap
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<?php if ( is_front_page() && is_home() ) : ?>
<?php get_template_part( 'global-templates/hero' ); ?>
<?php endif; ?>
<main>
<div class="position-relative" id="index-wrapper">
<section class="row no-gutters section section-hero d-flex justify-content-center align-items-end overflow-hidden pb-0 position-relative">
<div class="section-hero-image">
<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
</div>
<div class="col-10 pt-sm pb-md pl-sm bg-default">
<div class="row no-gutters d-flex flex-column">
<h1 class="col-8 text-white h2">
<?php
/* strip_tags removes <a> to make categories unclickable */
$categories_list = strip_tags( get_the_category_list( esc_html__( ', ', 'understrap' ) ) );
if ( $categories_list && understrap_categorized_blog() ) {
/* translators: %s: Categories of current post */
printf( '<h4 class="text-dark d-block w-100">' . esc_html__( '%s', 'understrap' ) . '</h4>', $categories_list ); // WPCS: XSS OK.
}
?>
</h1>
<h1 class="col-8 text-white h2">
<?php
the_title(
sprintf( '<h4 class="entry-title mb-4"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
'</a></h4>'
);
?>
</h1>
<div class="col-4 mt-md">
</div>
</div>
</div>
</section>
<section class="section p-0" id="content" tabindex="-1">
<div class="row content-container no-gutters py-lg">
<div class="col-6 px-5">
<h4>Lorem ipsum dolor sit amet</h4>
</div>
<div class="col-6 px-5">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="row no-gutters">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<div class="site-main" id="main">
<div class="row no-gutters">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'loop-templates/content', get_post_format() );
?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'loop-templates/content', 'none' ); ?>
<?php endif; ?>
</div>
</div><!-- #main -->
<!-- The pagination component -->
<?php understrap_pagination(); ?>
<!-- Do the right sidebar check -->
<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
</div><!-- .row -->
</section><!-- #content -->
</div><!-- #index-wrapper -->
</main>
<?php get_footer(); ?>
А вот мой content.php:
<?php
/**
* Post rendering content according to caller of get_template_part.
*
* @package understrap
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?>
<article class="col col-4 p-0" <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="card card-custom">
<header class="entry-header">
<div class="card-header position-relative">
<!-- <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?> -->
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large', array('class' => 'card-img-top'));
}
?>
</div>
<div class="row py-5 px-5 no-gutters card-custom-bottom">
<!-- Category -->
<?php
/* strip_tags removes <a> to make categories unclickable */
$categories_list = strip_tags( get_the_category_list( esc_html__( ', ', 'understrap' ) ) );
if ( $categories_list && understrap_categorized_blog() ) {
/* translators: %s: Categories of current post */
printf( '<h4 class="text-dark d-block w-100">' . esc_html__( '%s', 'understrap' ) . '</h4>', $categories_list ); // WPCS: XSS OK.
}
?>
<!-- Category end -->
<?php
the_title(
sprintf( '<h4 class="entry-title mb-4"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
'</a></h4>'
);
?>
<!-- <div class="entry-content">
<?php the_excerpt(); ?>
<?php
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
'after' => '</div>',
)
);
?>
</div> -->
</div>
<!-- <?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php understrap_posted_on(); ?>
</div>
<?php endif; ?> -->
</header><!-- .entry-header -->
<!-- <footer class="entry-footer">
<?php understrap_entry_footer(); ?>
</footer> -->
</div>
</article><!-- #post-## -->