>【wordpress】プラグインなしでおしゃれな内部リンクのブログカードを実装する方法2019/4/2僕が最近重視しているのは回遊率。当ブログもユーザー数が増えてきたのですが、回遊率(PV/UU)はそこまで高くない。それは僕がレコメンドしてあげている記事が外れていたりとか、そもそも魅力を感じてもらえていないのか。いろいろな要素が考えられます。「ブログカードリンク」よりも「テキストリンク」のほうがクリックされやすいという話は結構聞くのですが、それでもテキストリンクってプレーンな状態だとかっこよくないんですよね。ときにリンクのサムネイルまで見せたいというときもあるので、ブログカード自体を挿入できる準備はいつでも整えておきたい。今回はそんなブログカードをプラグインなしで実装してみたいとおもいます。sponsoredなぜプラグインなしで、自分で実装する必要があるのか前置きとして、さらっとなぜプラグインを利用しないのかという点について。ブログカードのプラグインで言えばPz-LinkCardが有名かもしれません。僕も昔は使っていましたが、今は導入していません。理由は一つ、重いから。プラグインって誰でも利用できるように色々試行錯誤して作られているので、必然的にサイトの表示などが重くなります。(独自のCSSとかを別途読み込むし。)他にはembedlyやはてなブックマークリンク(wordpressなら直接URL打てば勝手にブログカード化される)などがあるのですが、こちらも僕はできれば使いたくない。いう外部サービスを利用すると、万が一サービスの変更があったときの影響が大きい。自分の管理下で作成するのが後々のことを考えると拡張性も高く、便利だと考えました。自分で実装するにはある程度知識が必要。初心者で、やってもらえる人が他にいない場合はこれらのプラグインや外部サービスを積極的に活用することも視野にいれておきましょう。プラグイン無しで内部リンクカードを表示するためのフローさて、早速実装してまいります。フローとしては2つでfunction.phpに該当部分のコードをコピペstyle.cssにCSSを追加の2点。Ultimateの使い方を徹底解説!一段階上のサイトにレベルアップ。Ultimateの使い方を徹底解説!一段階上のサイトにレベルアップ。こちらはショートコードで記事内に入れることができるようになりますので、記事に入れるのも簡単。有名なオープンケージのwordpressテーマに実装されているブログカードを参考にし、CSSを使って割とシンプルなデザインにしています。導入するコードをご紹介しましょう。sponsoredfunction.phpに挿入するコード基本的にはコードをコピペするだけ。下記のコードをfunction.phpにコピペしましょう。(参考記事:http://www.komaroku.com/related-articles-blog-card)注意点function.phpはミスをするとサイトの表示にエラーが出てしまうので、FTPなどでしっかりとバックアップを取ってください。url="表示したい記事のURL"]というショートコードで内部リンクをブログカード表示できるようになります。この状態だとデザインが崩れてしまっているので、整えるコードを書きます。style.cssにコピペするコードcssはこちら。このコードをstyle.cssの一番下に追加してください。0!important;}}部分的に僕のサイトのデザインように整えてしまっている部分(「!important」を入れている部分とか)があるので、その辺は適宜変更してもらえればと思います。記事に表示されているか確認してみましょう!追記:「続きを読む」のボタンについてブログカードをよりクリックしてもらう為に、ブログカード内に「続きを読む」ボタンを追加しました。(コードはすでに修正したものを記載しています。)右下に固定する形で表示していますので、タイトルが長い場合は少し被ってしまうものの、実際にクリック率は1.5倍くらいに上がっています。みんなも試してみてね。ブログはおしゃれにしたいよね。いくらテキストリンクがいいとはいえ、やっぱり僕はデザインも重視したいと思っています。見た目が良くないと読者もついてくれないですし、何より記事を書いていて自分が気持ちよくない。今回のコードは内部リンクのみですが、これで回遊してくれる人が増えると嬉しいと思っています。興味のある方はぜひ今回の方法で実装してみてくださいね!けーすけ(@saradaregend)から一言。Syntax系のプラグインって自分で実装できないのかな・・・TwitterLINE@FEEDLYYouTubeショートコードでサイトを最強体質にしましょうサイトデザインの見せ方を変更するのに便利なプラグインがあります。Ultimateというものを結構使っています。Ultimateの使い方を徹底解説!一段階上のサイトにレベルアップ。Ultimateの使い方を徹底解説!一段階上のサイトにレベルアップ。関連記事sponsoredもっと記事を見てみるブログ・サイトにおすすめブログに使えるおすすめフォントは?そのサイズと行間など。Cacheでエラーの対処法は実はすごく簡単です。α7SIIIの噂や追加して欲しい機能まとめ。魅力的なスペックだ...2019/11/27二人でつけると、今日の気分がちょっぴりあがる。Nordgreenの腕時計を最近おそろでつけています。【PR】2019/11/11自分の耳に吸いつく高音質イヤホン。M-SOUNDS「MS-TW3」レビュー【PR】2019/11/06仕事でもゲームでも。1306H」レビュー【PR】2019/10/15これ、欲しかった!が実現されたバックパック。Almighty」一つでこなす。写真と旅が中心ですが、好きなガジェットとかもちょくちょく書いちゃうタイプ。けーすけについてお問い合わせ・商品のPRなどについてカメラ・ガジェット・旅好き20代男子のライフスタイルマガジン"webledge(ウェブレッジ)"カメラ・ガジェット・旅好きな20代男子が贈るブログメディアです。