如何自定义帖子摘录css

Question

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

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

这是我的头版。 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