Question

我想通过CSS自定义我的帖子摘录字体和大小。我该怎么做？我不认为我可以添加一个类，所以我很难知道如何做到这一点。

///////////////////////////////////

这是我的front-page.php

<?php
/*
 * Template Name: learningwordpress
 */
 
get_header();
 get_template_part ('inc/carousel');
$i = 0;
$args = array(
    'posts_per_page' => 14,
    'paged' => 1
);
 
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
 
        if( $i %2 == 1 ) {
                   $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>

 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php

        }
        else {
         $the_query->the_post(); ?>
            <article class="post col-md-12">
                <?php the_post_thumbnail('large-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php
        }
        ?>
        <?php
        $i++;
    }
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

Answer 1

您可以在摘录周围的p标签上添加一个类customfont，如下所示：

<?php
/*
 * Template Name: learningwordpress
 */

get_header();
 get_template_part ('inc/carousel');
$i = 0;
$args = array(
    'posts_per_page' => 14,
    'paged' => 1
);

$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {

        if( $i %2 == 1 ) {
                   $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>

 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>      
            <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
 <?php $the_query->the_post(); ?>
            <article class="post col-md-4">
                <?php the_post_thumbnail('medium-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php

        }
        else {
         $the_query->the_post(); ?>
            <article class="post col-md-12">
                <?php the_post_thumbnail('large-thumbnail'); ?>
                <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="customfont">
                    <?php echo get_the_excerpt(); ?>
                </p>
                    <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            </article>
            <?php
        }
        ?>
        <?php
        $i++;
    }
}
else {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

...并添加此CSS：

.customfont {font-size: 200%; font-family: "Comic Sans MS", cursive, sans-serif;}

Answer 2

如果你不能将CSS类添加到PHP，那么定位它？

article.post.col-md-4 p, article.post.col-md-12 p { font-size: 1.5em; }

您可能希望将其调整到它将出现的页面，假设页面有自己的类或ID集。

演示http://codepen.io/anon/pen/zKEdvv

如何自定义帖子摘录css

2 个答案: