私はビルドしているWordPressのウェブサイトのブログのインデックスページのための石積みのレイアウトを作成するためにCSSの複数の列を使用しようとしており、それにいくつかの問題があります。私は、ボーンズをスターターテーマとして使用しています。 WordPressブログインデックスCSSの石積みのレイアウト
私は石工の効果を作成するためにhome.php
ファイルのループを調整する:
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if (has_post_thumbnail()) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e('Oops, Post Not Found!', 'bonestheme'); ?></h1>
</header>
<section class="entry-content">
<p><?php _e('Uh Oh. Something is missing. Try double checking things.', 'bonestheme'); ?></p>
</section>
<footer class="article-footer">
<p><?php _e('This is the error message in the index.php template.', 'bonestheme'); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
私はポストサムネイル(特集画像)と全体.masonry-item
のdivを埋めるために、画像を取得しようとしているが、右現在、.masonry-item
divは投稿サムネイルよりも大きいです。
画像の下に表示される空の<a>
タグもあり、どこから来ているのかわかりません。
私はまた、一度サムネイル画像に表示される投稿のタイトルを取得しようとしていますが、それを動作させる方法を理解していません。
は、ここに私のテストサイトへのリンクです:http://tippingpointphoto.flywheelsites.com/blog/
すべてのヘルプははるかに高く評価されるだろう!
ありがとうございました!私はあなたの提案された方法のバリエーションを使用して動作するようになった。投稿のタイトルは画像の上に表示されますが、画像の中央に配置することはできません。 – bibliofille
https://css-tricks.com/centering-in-the-unknown/ – partypete25