#css
#css
Вопрос:
Я хочу настроить шрифт и размер моего фрагмента публикации с помощью 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(); Ответ №1:
Вы можете добавить класс customfont в теги p вокруг фрагмента, например:
<?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;}
Комментарии:
1. Спасибо! Это было намного проще, чем я думал!
Ответ №2:
Если вы не можете добавить CSS-класс в PHP, тогда настройте его?
article.post.col-md-4 p, article.post.col-md-12 p { font-size: 1.5em; }
Возможно, вы захотите настроить его для страниц, на которых он будет отображаться, предполагая, что страницы имеют свой собственный класс или набор идентификаторов.