如何自定義帖子摘錄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