4.1.0対応バージョンそもそもリンクをカード風に表示するというのを始めたのは「はてなブログ」が相互リンクをカード表示にする「はてなブログカード」が発祥。それが他サービスでも使えるようにサービス提供を開始して、今のブログカードの原型ができたそうです(詳しい経緯は知りません)。はてなブログカードを使って外部リンクを表示すると1つ問題が出てきます。それはリファラ情報がすべて「はてな」からとなり、どこからのリンクかが分からないことです。WordPressでもWordpress以外でも参考になった外部のサイトへリンクを張り、自身の記事経由でそのサイトへ訪問されたときにはリンク元としてアクセス解析などに表示され、リンク先のサイトの管理者が「ん?どこのサイト?」と思って訪問し、いいサイトであれば逆に紹介する・・・といったような相互リンクを確立できる要素もあるものなのに、それが分からないのはどう??と思います。カード」などと検索すると、プラグインなしでカード表示できるような紹介記事が多数ありますが、それらのほとんどは内部リンクは自サイト内の情報を直接取得して表示する外部リンクは「はてなブログカード」の機能を使うもの。プラグインを使うと表示が重くなるということからこれらの紹介記事を鵜呑みにして外部リンクを張ると、前述したような状態になりますから注意が必要です。BaseWordpressで「はてなapi」に頼らずにブログカードのようなリンクを作成するプラグ...https://www.momosiri.info/wppi/pz-linkcard/私が使っているテーマ「Simplicity」をはじめ、投稿やアーカイブの一覧にはてなブログで使われているような恰好いいリンク表示ができる人気のブログカード表示ですが、あくまでも「はてなapi」というはてなブログの機能を利用させてもらっているため、はてなブログが...がありますが、前者はいちいちタグを作って貼り付けてというのが面倒ですし、後者はいろいろな機能や便利な設定が加わってしまって重くなるのでは??という気がします(実際にどうなのかというのは未検証です)。そこで、最低限の機能だけを持つリンクカード作成プラグインを見つけました。Cards」は本当にオプション項目が少なく、ショートコードでリンクを作成するだけでカード表示されるという機能だけに絞ったプラグインで、リンクをカード化したいけどできるだけシンプルにしたい!という方におすすめです。外部リンクをカード表示できる内部リンクをカード表示できるホワイトリストに登録しておくと、本文内にURLだけ挿入したものが自動でカードになるこのプラグインはサイトから出力されるOGPタグ(外部の埋め込み用に出力しているタグ)の情報を取得して表示するだけのシンプル構造。最近のサイトではほとんどこのOGPタグが設定されています(特にWordpressで一般的なテーマを使った場合は100%でしょう)から、問題なく表示できると思います。最後のホワイトリスト機能が便利だと思います。この記事の内容についてこのプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願いますすべての環境で動作するとは限りませんできる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります有料版と無料版がある場合、テストは原則無料版のみで実施していますテスト環境については本文中に記載しています使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。Cards】プラグインは言語の変更に対応していますが、設定項目が少ないため特に翻訳しなくても設定できます。Cards】プラグインのインストールと設定インストール方法インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。Base【Wordpress】プラグインのインストール&追加方法とエラー対処の方法https://www.momosiri.info/cms/wordpresspluginerror/Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。Cards」で行います。上の設定でホワイトリストに登録しているドメインについてはURLをそのまま記述すればカード化されます。url=”リンク先URL”]【注意】コードをコピーして使用する前に必ずお読みくださいこの記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。使用については自己責任でお願いしますコードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いませんコードの変換エラーなどにより動作しない場合、更新エラーが出る場合がありますコードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがありますその場合には以下の方法で修正を行ってみてくださいコードの中に全角の記号が入っていませんか?半角にすることで解消できますコードの中に全角の空白(スペース)がありませんか?半角にすることで解決できますコードは合っているはずなのに更新できないときは特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。「何かが間違っています...」と表示され、更新できないときはこのエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。Base【Wordpress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...https://www.momosiri.info/cms/%E3%80%90wordpress%E3%80%91%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E5%90%88%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%ABfunctions-php%E3%81%AE%E6%9B%B4%E6%96%B0%E3%83%9C%E3%82%BF%E3%83%B3/Wordpressで何かをカスタマイズするときに通らなければならないのがテーマのfunctions.phpへの追記。一度失敗したことがある方なら分かると思いますが、このファイルはとっても重要で、間違ったコードなどを挿入するといきなり管理画面が真っ白、頭も真っ白になって...コードを転載する場合にはご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたしますを本文へ挿入し、「リンク先URL」へリンク先のURLを張り付ければカード化されます。Cards】プラグインの便利な使い方・カスタマイズ方法などより便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。このプラグインを使ってリンクを表示するとというTwitterからのツイート埋め込みのような大きいカードが表示されます。それでいい方はそのままでも良いのですが、ちょっと大きすぎるなぁという方のために、一般的に使われているサイズのカード表示ができるCSSを紹介しておきます。そのままコピペでいい感じに表示できると思います。表示サンプルは↓↓よかったら使ってください。15px;}}【注意】コードをコピーして使用する前に必ずお読みくださいこの記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。使用については自己責任でお願いしますコードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いませんコードの変換エラーなどにより動作しない場合、更新エラーが出る場合がありますコードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがありますその場合には以下の方法で修正を行ってみてくださいコードの中に全角の記号が入っていませんか?半角にすることで解消できますコードの中に全角の空白(スペース)がありませんか?半角にすることで解決できますコードは合っているはずなのに更新できないときは特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。「何かが間違っています...」と表示され、更新できないときはこのエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。Base【Wordpress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...https://www.momosiri.info/cms/%E3%80%90wordpress%E3%80%91%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E5%90%88%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%ABfunctions-php%E3%81%AE%E6%9B%B4%E6%96%B0%E3%83%9C%E3%82%BF%E3%83%B3/Wordpressで何かをカスタマイズするときに通らなければならないのがテーマのfunctions.phpへの追記。一度失敗したことがある方なら分かると思いますが、このファイルはとっても重要で、間違ったコードなどを挿入するといきなり管理画面が真っ白、頭も真っ白になって...コードを転載する場合にはご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたしますメディアクエリを使って幅768px以上の場合のみに適用されるようにしていますので、スマホ表示はデフォルトの状態になります。テスト環境・感想などWordPressのバージョン:5.1.1PHPのバージョン:7.2テーマ:オリジナルテーマプラグインのバージョン:0.9.7※このプラグインの最新バージョンは0.9.7です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。必要な機能のみが実装されているシンプルイズベストなプラグインだと思います。1点だけ、OGPタグの設定がされてなかったり、文字コードが違ったりするとカード表示されない、表示が文字化けするといった現象が出ますので、プレビューで確認してダメなものはテキストリンクで!とするといいでしょう。ひまあーと(管理人)☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。作者の記事一覧はこちらいつでもご相談・サイトカスタマイズの依頼を受け付けていますWordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。こちらのバナーからお気軽にお問い合わせください。※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。【スポンサーリンク】タグ:Wordpressプラグインワードプレス記事の拡散にご協力をお願いします閲覧いただきありがとうございました。Posts」はウィジェットへ現在閲覧しているカテゴリーの記事に限定した上でどのように表示するかを設定できるプラグインです。単純なようですが、下のようにいろいろな条件の設定ができるので、サイトを作成している人が思うものと近い関連記事を抽出して表示することができます。Top】はページ上部へ戻るボタンを簡単に設置することができ、標準で分かりやすいボタンを選ぶことも、オリジナルな文字列で表示することもできるので、親切機能をより親切に表示するのに役立つプラグインです。Footnotes】は脚注にしたい文章をショートコードで囲むだけで簡単に脚注へのリンクと脚注の一覧を作ってくれるプラグインです。記事の拡散にご協力お願いします閲覧いただきありがとうございます。この記事が役に立つ情報でしたら是非SNSでシェアやコメントをお願いします。Amazonアソシエイト・プログラムの参加者です。