投稿の抜粋をカスタマイズする方法

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

あなたがPHPにCSSクラスを追加することができない場合は、それをターゲットに？

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

ページに独自のクラスまたはIDが設定されていると仮定して、そのページを調整することができます。

デモhttp://codepen.io/anon/pen/zKEdvv