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

自分用のメモ。

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

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

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

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

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

仕上がりはこんな感じ。

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

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

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

【WordPress】カスタムフィールドを設置してSEO系プラグインを不要にするカスタマイズ！

急遽テーマを変更することになり、そのついでに行ったカスタマイズをメモしておきます。 内容はずっとやりたかったカスタムフィールド（投稿編集画面の下の方）の設置。 カスタムフィールドを設置して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;
}