ブログ

【WordPress5.0 Gutenberg】アイキャッチ画像付きの関連記事を記事内に貼り付ける方法!Pz-blogcard

皆さん、ご安全に!セキレイです!

自分のブログの記事内に、別の自分の記事リンクを貼り付けることを「内部リンク」と言いまして、貼り付け方も表示方法も様々です!

内部リンクにはサイト内の巡回率を高めて、PVを上げたり、読者に読んでもらいたい記事まで誘導する大事な役割があります。

そんな内部リンクは、文字にリンクさせるだけで簡単にできてしまうのですが…

それじゃ味気ないわな?

文字だけでも見てくれる人は見てくれるけど、やっぱりカッコイイ、綺麗なデザインの方が見てもらえる確率も上がるね!

具体的には…

関連記事:凄い人が多すぎてブログを辞めそうになってる人へ。これ読んでやる気出して!

この味気ないんが文字にリンクしただけのやつや。

[blogcard url=”https://midona-afirieito.com/2019/09/04/%e5%87%84%e3%81%84%e4%ba%ba%e3%81%8c%e5%a4%9a%e3%81%99%e3%81%8e%e3%81%a6%e3%83%96%e3%83%ad%e3%82%b0%e3%82%92%e8%be%9e%e3%82%81%e3%81%9d%e3%81%86%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%a6%e3%82%8b%e4%ba%ba/”]

これが、僕がこの記事で紹介したい内部リンクの様子!
アイキャッチ画像も付いてるし、デザインも綺麗で見やすいと思う!

コイツのアイキャッチ画像はサイズが合ってないけどな。

最初は少しだけ時間かかるけど、プラグインを入れるだけだから簡単だよ!!
それじゃあ行ってみよう!

「Pz-linkcard」というプラグインをインストールしよう!

まずは、Wordpressの方でプラグインをインストールしよう。「Pz-linkcard」っていうプラグインだよ!

「プラグインを追加」で、”pz”ってキーワードを打ち込むだけで一番上に出てくると思います。

作成者が「poporon」さんになっていることを一応確認してくださいね!

インストールして、有効化して頂ければあとは簡単なんです!

記事の投稿から”ショートコード”を打ち込むだけ!

あとはいつも通り記事作成してください。

そして、さっきみたいな内部リンクを貼り付けたいって思ったら、次の”ショートコード”を打つだけなんだ!

⇧これを書いて、「””」の中に貼り付けたい記事のURLをコピーして貼り付けるだけ!

こんな感じです!そうすると、先程インストールした「Pz-linkcard」がキレイなブログカードを作ってくれる訳ですね!そりゃっ!

[blogcard url=”https://midona-afirieito.com/2019/08/08/%e3%80%90%e3%83%96%e3%83%ad%e3%82%b0%e3%80%91pv%e3%82%92%e4%bc%b8%e3%81%b0%e3%81%99%e3%81%ab%e3%81%af%e3%81%a9%e3%81%86%e3%81%84%e3%81%86%e8%a8%98%e4%ba%8b%e3%81%8c%e8%89%af%e3%81%84%e3%81%ae%e3%81%8b/”]

すっごく簡単でしょ?

いちいちコードを打ち込むのが面倒だ!

うんうん、わかる。僕もそう思ったから、「再利用ブロック」を使ってる!

一度、さっきのショートコードを打ち込んだら、「再利用ブロックに追加」という項目を選択してください。

そしたら、そのブロックの名前を設定しましょう。そして、保存します。

この「再利用ブロック」はどこにあるかというと…

ブロックの左側の”プラスマーク”の中に、「再利用可能」というタブがあるのでその中にあるはずです!

選択すると、ブロックが出てくるので、「通常ブロックへ変換」を選択すると…

出てくるので、「””」の中にURLを入れて使用しましょう!

何回か使っていると…

このように、「よく使うもの」タブに出てくるようになるので、簡単にショートコードが呼び出せるようになります!

カスタマイズも簡単かつ色々ある!

ある程度はデザインもカスタマイズできるんだよね!
ちなみに、僕が例に出したのはあんまり変えてないよ!

「設定」から「Pzカード設定」を選択すると…

こんな感じで、色々な設定ができるんだ!
これは実際に自分で触れてみた方がわかりやすいと思うよ!

(投げやりやなぁオイ…)

僕が体験したエラー

僕が体験したエラーも一応書いておくね!

ショートコードとURLを打ち込んでプレビューしてみたら、こんな感じで「pz-linkcad:incorrect URL specification.(url=)」っていう謎の1行が。

なんやこれ?なんでうまくいかんのや??

って思って、色々とサイトを調べてもわからず…。原因は凄く単純なことで…

「””」の中にURLをコピー&ペーストしてたのですが、何故か「リンクされた状態」で貼り付けられてたんですよね。通りでURLが青くなってたわけです。

「リンクされた状態」のURLをPz-linkcardでリンクさせようとしたから、変なエラーになってたんでしょうね。

このエラーは、URLにマウスを合わせて、画像内の○のリンクを解除したら直りました。URLの文字が青から黒になったら大丈夫です。

こんな感じで、URLのエラーが発生したら「投稿」と「Pz設定」の方でこんなエラー文が出るんだけど…

「pz-linkcard:URLパラメーターの指定が無効です」というエラーですが、「設定画面」から解除できますので焦らずに!

まとめ

今回はブログカード、内部リンクについて綺麗なデザインを簡単に貼り付けれられる方法の紹介でした!

こんな簡単に内部リンクが綺麗で見やすくなるんならやり得やなホンマ。

これでブログ内の巡回率を高めて、Google先生から良い評価もらっちゃいましょう!…と、読者のためになる記事を読んでもらうために!

最後に、このプラグインを作成されたpoporonさんのブログのURLを貼っておくね!
Pz-linkcardについての詳しい説明や、他のプラグインについても書いているから気になる方は是非!

poporonさんのブログ「ぽぽづれ。」