2018/01/28 2018/03/31

「この記事を書いた人」を表示させる方法 (プラグインなし)

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

前回、「Fancier Author Box」というプラグインを使用して、 WordPressの記事下に「この記事を書いた人」を表示させる方法を書きました。今回は【プラグインなし】で表示させる方法です。 PHPファイルを作成したりするので、少しだけ上級者向けです！先に書いておきますが、簡単にしか説明しません(笑)

「profile.php」ファイルを作成します

・3行目「画像のURLを挿入します」を変更・５行目「ここに自己紹介を書きます」を変更

<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>

<h5>この記事を書いた人</h5>

<p>ここに自己紹介を書きます</p>

<?php

global $post;

$args = array( 'posts_per_page' => 3,

'paged' => $paged

);

$myposts = get_posts( $args );

foreach( $myposts as $post ) {

setup_postdata($post);

<?php

}

wp_reset_postdata();

</ul>

</section>

profile.cssを指定する

#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;
}

}

#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を呼び出すことができます。

<?php get_template_part('profile'); ?>

1	<?php get_template_part('profile'); ?>

profile.cssも、single.phpのヘッダー部分に設定してください。

完成

このようになりました！スマホにも対応しており、自己紹介文の下には最新記事が３つ入るようにしました。

非常に簡単にしか説明していませんが、わかりましたでしょうか。多少、強引にCSSで設定しているところがあるので、ズレたりするかもしれませんが、ご了承下さい(個人で修正してください)。

デザイナー/フリーランスパパ＠神田翼

フリーランスのWebデザイナーの神田翼です。２児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

「この記事を書いた人」を表示させる方法 (プラグインなし)

「profile.php」ファイルを作成します

profile.cssを指定する

single.phpの記事下の箇所にコードを挿入

完成

デザイナー/フリーランスパパ＠神田翼

関連記事

最新の記事一覧