【WordPress】「合わせて読みたい」をショートコード+αで効率UP

Posted on Author さちお
【WordPress】「合わせて読みたい」をショートコード+αで効率UP-00

WordPress（ワードプレス）で必ず追加したい過去記事へ誘導することができる「合わせて読みたい」機能を、ショートコード+αでさらに効率よく追加していく工夫をしてみたので参考にしてみて下さい。

過去記事へのアクセスアップする便利機能

ブログでよく見かけるこの表示↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP-02

現在閲覧中の記事と合わせて読むと為になる記事を紹介して、過去記事への誘導を行っているんですね。

僕の場合、今まではこういう形で誘導を行っていました↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP-03

いわゆる「キャプション」で、テキスト誘導で「こちらのサムネイルからどうぞ」的な感じです。

これでも誘導としては悪くはないのですが、上記の表記にしてから過去記事へのアクセス率がグッと上がったんですね。

作業量的にも多くないので便利なのですが、さらに効率よく追加できる方法を考えたので参考にしてみてください。

「合わせて読みたい」をショートコードにする

まずは、こちらのサイトを参考に「合わせて読みたい」をショートコードで入れられるようにしました↓↓↓

参考：〝WordPress〟「合わせて読みたい」ショートコード作成方法

こちらのfunction.phpに埋め込むコードの14行目を以下に変更↓↓↓

<h2 class=”kanren-title”><span><i class=”fas fa-link”></i>’ . $label . ‘</span></h2>

↓↓↓

<p class=”kanren-title”><span><i class=”fas fa-check”></i> ‘ . $label . ‘</span></p>

あとは、特に変更なくそのまま使わせていただきました。

cssは、好みにしたかったのでこちらに変更↓↓↓

p.kanren-title {
margin: 0!important;
}

.kanren-cont-link {
font-size: 15px!important;
color: #999;
margin-top: 3px!important;
}
.kanren {position:relative;}
.kanren .kanren-title {
font-size: 1em;
margin: 0;
padding: 1px 10px;
text-align: left;
background-color: #ed8989;
color: #fff;
font-weight: bold;
width: max-content;
position: relative;
top: 2px;
left: 10px;
}
.kanren .kanren-list {
display:block;
margin:0;
padding:0;
list-style:none;
border-color: #ed8989!important;
}
.kanren .kanren-list li {
margin: 0 auto 20px;
padding: 0;
border: 2px solid #ed8989!important;
border-radius: 5px;
}
.kanren .kanren-list li {display:block;transition-duration:.5s;}
.kanren .kanren-list li:hover {background:#e5f0f3;}
.kanren .kanren-list li dl {
display:table;
padding:20px;
margin:0;
}
.kanren .kanren-list li dl dt,
.kanren .kanren-list li dl dd {
display:table-cell;
margin:0;
padding:0;
vertical-align:top;
}
.kanren .kanren-list li dl dt {
width:20%;
}
.kanren .kanren-list li dl dd {
width:80%;
padding-left:20px;
}

.kanren .kanren-list li dl dd p {
margin:0 auto 0px;
padding:0;
border:none;
background:none;
font-size:1.2em;
line-height: 1.25;
}

.fa {
font-family: “Font Awesome 5 Free”;
}

herder.phpにこちらも追加↓↓↓

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>

これで下記ショートコードで記事内に「合わせて読みたい」が置けるようになりました↓↓↓

［kanren id=”表示したい記事のIDの数字”］

ショートコードのコピペが面倒だ

次に、毎回コピペしないといけない手間を省く作業。

ショートコードをショートカットで呼び出すプラグインを入れます↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP04

参考：AddQuicktag

AddQuicktagは、ショートコードを覚えさせて簡単に呼び出せるプラグインです。

インストールすると「設定」の中に「AddQuicktag」が現れます。

僕はこんな感じで入れました↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP-05

ラベル名に「あわせて」、開始タグと終了タグに挟むショートコードを入れておきます。

もうちょっと良い設定があるかもしれません。

すると、記事の編集画面に「Quicktags」というのが現れます↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP-06

記事内にあらかじめ記事IDを書いて、それを指定してから「あわせて」を選択するとショートコードが完成します。

少し楽になりました。

記事IDのコピペが面倒だ

記事のIDは「入れたい記事の編集画面のURLからIDをコピペする」という手順です。

これを省略するために、記事の日付の横に記事IDを表示させした↓↓↓

【WordPress】「合わせて読みたい」をショートコード+αで効率UP-07

表示したい場所にこのコードを入れます↓↓↓

ID:<?php the_ID(); ?>

僕は、記事一覧と記事ページに入れてます。

これを「選択」して「コピー」します。

「選択」→「コピー」が面倒だ

さらに効率を上げるためにこちらの記事を参考に↓↓↓

参考：【HTML/CSS】クリックするだけでテキストをコピーできるボタン【ワードプレス】

</body>直前に入れるscriptタグをheader.phpの<body>の直前に入れました。

そして、先ほどIDを表示させるために入れたコードをこちらに変更↓↓↓

<span class=”copy_btn” data-clipboard-text=”<?php the_ID(); ?>”>ID:<?php the_ID(); ?></span>

これでIDをクリックするだけでクリップボードにIDがコピーされるようになりました。

あとは、記事に貼り付け→選択→「あわせて」、もしくは「あわせて」→間にペーストですね。

もうちょっと簡単に出来そうですが、とりあえず今は満足です。

以上です。

Byさちお

こんな記事も読まれています

＼ SHARE ／