「この記事を書いた人」を表示させる方法 (プラグインなし)
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。
前回、「Fancier Author Box」というプラグインを使用して、 WordPressの記事下に「この記事を書いた人」を表示させる方法を書きました。 今回は【プラグインなし】で表示させる方法です。 PHPファイルを作成したりするので、少しだけ上級者向けです! 先に書いておきますが、簡単にしか説明しません(笑)「profile.php」ファイルを作成します
・3行目「画像のURLを挿入します」を変更 ・5行目「ここに自己紹介を書きます」を変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section id="profile"> <h5>この記事を書いた人</h5> <section class="left"><img src="画像のURLを挿入します" alt=""></section> <section class="right"> <p>ここに自己紹介を書きます</p> <ul class="clearfix"> <?php global $post; $args = array( 'posts_per_page' => 3, 'paged' => $paged ); $myposts = get_posts( $args ); foreach( $myposts as $post ) { setup_postdata($post); ?> <li class="clearfix"><p class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p></li> <?php } wp_reset_postdata(); ?> </ul> </section> </section> |
profile.cssを指定する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
#profile{ border: 1px solid #313C4E; width: 96%; margin: 20px auto; } #profile h5{ color: #fff; background: #313C4E; padding: 20px; text-align: left; } #profile .block{ padding: 15px; } #profile .block .left{ width: 15%; float: left; } #profile .block .left img{ width: 100%; padding: 0 !important; } #profile .block .right{ width: 82%; float: right; font-size: 14px; line-height: 1.5; } #profile .block .right ul{ padding-top: 10px; border-top: dotted 1px #ccc; margin-top: 10px; } #profile .block .right ul li{ margin-bottom: 5px; font-size: 90%; } #profile .block .right ul li a{ color:#313C4E !important; } @media (max-width: 599px) { /* small devices */ #profile .block .left{ width: 100%; float: none; margin-bottom: 10px; text-align: -webkit-center; } #profile .block .left img{ width: 50%; } #profile .block .right{ width: 100%; float: none; } } |
single.phpの記事下の箇所にコードを挿入
下記のように挿入すると、profile.phpを呼び出すことができます。
1 |
<?php get_template_part('profile'); ?> |
完成
このようになりました! スマホにも対応しており、自己紹介文の下には最新記事が3つ入るようにしました。
スポンサーリンク