URLをコピペするだけ!管理画面から記事毎にオススメ記事を設定して、記事下に表示させるカスタマイズ。

自分用のメモ。

記事下に、関連したオススメ記事を表示してブログ内の巡回率を高めようとして行ったカスタマイズです。

記事下には関連記事を既に表示していましたが、関連記事はランダムで表示されてしまい、同じカテゴリ内でも記事との関連が薄かったりすることもあるので、よりマッチ度の高い記事を、記事を読み終わったすぐ後の記事直下で提示することが出来るようにしました。

いちいちタイトルとURLをコピペするのが面倒だったので、設定項目にURLだけを張り付ければ自動でタイトルも引っ張ってくるようにしてあります。

ちなみに僕は、設定したのは良いけど、過去記事まで全部URLを入力出来ないままになっているので、一旦削除することにしました。笑

なので、後で必要になった時のためのメモ。笑

 

目次

仕上がりはこんな感じ。

ワードプレスカスタマイズ|記事下オススメ記事の設定

ワードプレスの記事管理画面下、カスタムフィールドに上記のような設定項目を追加しました。

この欄にオススメしたい記事のURLを入れると、記事下にリンク付きのタイトルが自動で表示されます。

ついでに、上のSEO設定項目は以下の記事にカスタマイズ方法をメモしています。

 

ワードプレスカスタマイズ|記事下オススメ記事の設定

表示はこんな感じです。

 

カスタマイズするためのコード

function.php

まずfunction.phpに以下のように記述しました。

// カスタムフィールド追加
add_action('admin_menu', 'add_custom_fields');
add_action('save_post', 'save_custom_fields');

function add_custom_fields() {
add_meta_box( 'my_sectionid2', 'あわせて読みたい', 'recommend_custom_fields', 'post');
}

function recommend_custom_fields() {
global $post;
$recommend1 = get_post_meta($post->ID,'recommend_url1',true);
$recommend2 = get_post_meta($post->ID,'recommend_url2',true);
$recommend3 = get_post_meta($post->ID,'recommend_url3',true);
echo '<p>※あわせて読みたいに表示したい記事のURLを貼り付け。</p>';
echo '<input type="text" name="recommend_url1" value="'.esc_html($recommend1).'" size="59" /></p>';
echo '<input type="text" name="recommend_url2" value="'.esc_html($recommend2).'" size="59" /></p>';
echo '<input type="text" name="recommend_url3" value="'.esc_html($recommend3).'" size="59" /></p>';
}


// カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {
if(!empty($_POST['recommend_url1']))
update_post_meta($post_id, 'recommend_url1', $_POST['recommend_url1'] );
else delete_post_meta($post_id, 'recommend_url1');

if(!empty($_POST['recommend_url2']))
update_post_meta($post_id, 'recommend_url2', $_POST['recommend_url2'] );
else delete_post_meta($post_id, 'recommend_url2');

if(!empty($_POST['recommend_url3']))
update_post_meta($post_id, 'recommend_url3', $_POST['recommend_url3'] );
else delete_post_meta($post_id, 'recommend_url3');
}

 

single.php

コードがごちゃごちゃするのが嫌なので、記事下の表示したい部分に以下のようなコードを入力して、新しく作った”kijisita-awasete.php”と言う別ファイルから呼び出すようにしました。

<?php get_template_part('kijisita-awasete'); ?>

 

kijisita-awasete.php

実際に出力するコードは以下の通り。

<div class="kijisita-box">
<p class="kijisita-box-title">合わせてどうぞ!</p>
<ul>
<?php 
$recommend_url1_value = get_post_meta( get_the_ID(), 'recommend_url1', true );
$recommend_url2_value = get_post_meta( get_the_ID(), 'recommend_url2', true );
$recommend_url3_value = get_post_meta( get_the_ID(), 'recommend_url3', true );
$id1 = url_to_postid($recommend_url1_value);//URLから投稿IDを取得
$id2 = url_to_postid($recommend_url2_value);//URLから投稿IDを取得
$id3 = url_to_postid($recommend_url3_value);//URLから投稿IDを取得
$post1 = get_post($id1);//IDから投稿情報の取得
$post2 = get_post($id2);//IDから投稿情報の取得

if(empty($title1)){
$title1 = esc_html(get_the_title($id1));
}
if(empty($title2)){
$title2 = esc_html(get_the_title($id2));
}
if(empty($title3)){
$title3 = esc_html(get_the_title($id3));
}

if ( ! empty( $recommend_url1_value ) ) {
echo '<li><a href="', $recommend_url1_value, '" target="_blank">', $title1 ,'</a></li>';
}

if ( ! empty( $recommend_url2_value ) ) {
echo '<li><a href="', $recommend_url2_value, '" target="_blank">', $title2 ,'</a></li>';
}

if ( ! empty( $recommend_url3_value ) ) {
echo '<li><a href="', $recommend_url3_value, '" target="_blank">', $title3 ,'</a></li>';
} 
?>

</ul>
</div>

 

style.css

そして、最後にレイアウト。スタイルシートには以下のように記述。

/*********************
記事下
*********************/

/*記事下囲み枠*/
.kijisita-box {
position: relative;
margin: 30px 0 20px;
padding: 25px;
border: 2px solid #666;
}
.kijisita-box .kijisita-box-title {
position: absolute;
display: inline-block;
top: -20px;
left: 15px;
padding: 5px 10px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 18px;
background: #fff;
color: #666;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.kijisita-box p {
margin: 0; 
padding: 0;
}

.kijisita-box a {
text-decoration: none;
}

.kijisita-box ul {
padding-left: 0px;
margin: 0px;
}


.kijisita-box ul li {
margin-bottom: 10px;
list-style: none;
}

.kijisita-box ul li:last-child {
margin-bottom: 0px;
}

.kijisita-box ul li a:before {
font-family: 'FontAwesome';
content: "\f101";
color: #666;
margin-right: 7px;
}

 

よかったらシェア!
  • URLをコピーしました!

コメントする

コメント一覧 (2件)

  • こちらの記事とても参考になりました。
    スマホブラウザにも対応するためには、他にコードを書き込む必要がありますでしょうか??

    PCは対応できたのですが、スマホだと囲み枠線が表示されません。

    • Shotaさん

      コメントありがとうございます!
      お役に立てそうで良かったです。

      僕は、このコードのみでPC、スマホも対応出来ています。
      スマホで囲み枠線が表示されないなら、スタイルシートの問題ですかね?
      同じスタイルシート内でも、デバイス毎の条件分岐がされている場合は、
      PC、スマホどちらにもこのコードが読み込まれるように記述する必要があります。
      既にご存知だったら申し訳ありませんが、今のところコレしか原因が思いつきません(^^;

Shota へ返信する コメントをキャンセル

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次