Blog

Blogの関連記事の表示を変えてみました

Blogの記事の下には,関連記事として,同じタグをつけた記事のタイトルが表示されるようになっています。

関連記事って何だろう

 少しずつ記事を増やしていくと,記事の下にある関連記事という場所にBlogの記事タイトルが表示されるようになりました。

何の関連だろうとチェックしてみると,どうやら同じタグをつけた記事を表示しているようでした。

デフォルトはタイトルだけのシンプルな表示

 この関連記事の表示の仕方がタイトルのみというシンプルなものだったので,他のWebサイトのブログのようにアイキャッチ画像などを表示できたらいいなと思い,変更をすることにしました。

デフォルトの関連記事表示はシンプルです

デフォルトの関連記事表示はシンプルです

まずは,Blogの記事表示をしていると思われるphpファイルを探して,/vendor/baserproject/bc-front/templates/plugin/BcBlog/Blog/default フォルダにあるsingle.phpにたどり着きました。このファイルは指定したBlogの記事本文の表示をするファイルのようでした。最後の方のコードを見ると,以下の記述がありました。

<!-- /Elements/blog_related_posts.php -->
<?php $this->BcBaser->element('blog_related_posts') ?>

どうやら,blog_related_posts.phpというファイルが関連記事表示を担当してるようだとわかりました。

関連記事を表示しているコードを書き換えます

 しかし,このファイルがどこにあるのかわからず探し回り,最後はファイル名で検索して/vendor/baserproject/bc-front/templates/plugin/BcBlog/element フォルダにあることを突きとめました。

blog_related_posts.phpファイルを開き,関連記事を表示しているコードを見つけました。このliタグの部分を書き換えれば良さそうです。

<?php foreach($relatedPosts as $relatedPost): ?>
     <li><?php $this->Blog->postTitle($relatedPost) ?></li>
 <?php endforeach ?>

書き換えれば良さそうな場所は見つけましたが,具体的にどう書き換えればいいのかはわからないため,Blogトップの記事一覧表示と同じようにしようと考えました。/vendor/baserproject/bc-front/templates/plugin/BcBlog/Blog/default フォルダにあるindex.phpから,以下のコードを上記のliタグの部分と入れ替えました。

    <article class="bs-blog-post__item clearfix">
        <?php if(!empty($post->eye_catch)): ?>
        <a href="<?php echo $this->BcBaser->getBlogPostLinkUrl($post) ?>" class="bs-blog-post__item-eye-catch">
            <?php $this->BcBaser->blogPostEyeCatch($post, ['width' => 150, 'link' => false]) ?>
        </a>
        <?php endif ?>
        <span class="bs-blog-post__item-date"><?php $this->BcBaser->blogPostDate($post, 'Y.m.d') ?></span>
        <?php $this->BcBaser->blogPostCategory($post, ['class' => 'bs-blog-post__item-category']) ?>
        <span class="bs-blog-post__item-title"><?php $this->BcBaser->blogPostTitle($post) ?></span>
        <?php if(strip_tags($post->content . $post->detail)): ?>
        <div class="bs-top-post__item-detail"><?php $this->BcBaser->blogPostContent($post, true, false, 46) ?>...</div>
        <?php endif ?>
    </article>

その後に,$postとなっているところを$relatedPostに書き換えて変更作業は完了です。

意図していた見た目になりました!!

 変更後の関連記事表示がこちらです。

アイキャッチ画像や投稿日が表示されるようになりました

アイキャッチ画像や投稿日が表示されるようになりました

phpは以前のWebサイトでフリーのモジュールを組み合わせて構築していたので一時期よく使っていましたが,それほど知識があるわけではなく,コードを見ながらこんな感じかな?で書き換えを進めました。こういうときはプログラミングの知識が役に立ちます。

小さな変更をするにも色々調べながらなので一苦労ですが,うまくいくと嬉しいものです。

この記事の内容とは関連がありませんが,サイトのfaviconも変更しました。

この記事へのコメント

コメントはまだありません。

コメントを送る

必須
必須  
※ メールアドレスは公開されません
任意
必須
Loading...  画像の文字を入力してください
1
2
3
4
5
6
7
8