• プラグイン無し！外部＆内部リンク対応ブログカード

プラグイン無し！外部＆内部リンク対応ブログカード

プラグイン無し！外部＆内部リンク対応ブログカード
目次

マテリアルデザイン風ブログカード

プラグインを使わず、PHPとCSSのコピーで使える、内部＆外部リンク対応のマテリアルデザイン風ブログカード（リンクカード）です。

WordPressの新しいエディタGutenberg だと、うまく表示できない時があることと、 内部と外部リンクどちらも対応してるブログカードが見つからなかったので、自作してみました。

WordPress以外でも使えます（外部リンクとして）。

特徴

内部リンク

ルイボスティーで長年の便秘改善＆白髪減少した
ルイボスティーを普段飲むお茶に変えてから3年半が経ち、大きな成果として実感しているのが、便秘改善と白髪減少です…

URL相対パスを指定すると、内部リンクとして、右下に「記事を読む」が付きます（SEO効果）。

外部リンク

【WordPress】コピペで実装ブロã…
この記事では、WordPressで内部リンクのブã…
https://macoblog.com/wp-blogcard-notplugin/

URL絶対パスを指定すると、外部リンクとして下部にURLを表示し、新規ウィンドウ（タブ）で開きます（ PHPの部分を参考にさせていただいたブログです ）。

  • セキュリティの観点から、下部にURLを表示し透明性を高めました。
  • target=”_blank”問題を加味し、rel=”noopener noreferrer”を入れています。

使い方

PHPやCSSに慣れていない人はバックアップを取って慎重に作業してください。
1つずつ更新して、エラーが出ないかページ確認することをおすすめします。
以下４ステップで完了です。

1. ブログカード用CSSを追加

外観＞テーマエディター＞ style.css、または 外観＞カスタマイズ＞追加CSS

2. OpenGraph.php を追加

リンク先から OpenGraph.phpをDLし、functions.php と同じ場所にアップロードします。

wp-content > themes > テーマのフォルダ 配下

アップロード方法がよくわからない人は、 functions.php 内にコードを貼ってもOKです。

外観＞テーマエディター＞functions.php

3. ブログカード用PHPを追加

外観＞テーマエディター＞ functions.php
以下をコピーして貼り付けてください。

wordpress内で更新できない時は、レンタルサーバーのエディタやFTPクライアントで以下のパスのファイルを更新します。

wp-content > themes > テーマのフォルダ > functions.php

4. ショートコードを入れる

ブログカードを入れたい場所にショートコード（ウィジェット）を入れます。

外部リンクの場合、http～の絶対パス（URL）を指定します（下記{}を[]にして下さい）

{nlink url="https://blog.ukarelife.com/handmadelotion/"}

内部リンクの場合、ホスト名の後ろのディレクトリ以下の相対パスを指定します（下記{}を[]にして下さい）

{nlink url="/handmadelotion/"}

設定・カスタマイズ

メタデータ取得先（必須）

    // $output = get_the_excerpt(); // 通常
    // $output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true); // YoastSEO
    $output = get_post_meta($post_id,'_aioseop_description',true); // AllinOneSEO

phpの69～71行目は、お使いのプラグインによってどれか一つ有効にしてください（内部リンク時の取得先です）。
AllinOneSEO用になってます。

行の先頭に//を入れてコメントアウトすると無効になります。

デバイス別 文字数設定（任意）

上の画像はスマホで見たときの表示例で、タイトルが20文字、説明文が30文字の設定です。

    // 文字数設定（マルチバイト文字数）
    $arrc = array(
    't' => array(    // Title
        'xs' => 20,  // SmartPhone
        'xm' => 40,  // Tablet
        'pc' => 40   // Pc
    ),
    'd' => array(    // Description
        'xs' => 30,  // SmartPhone
        'xm' => 55,  // Tablet
        'pc' => 55   // Pc
        )
    );

phpの47行目～にある文字数設定は、 スマホ・タブレット・PCで見たときの タイトル(title)と説明(description)の文字数をそれぞれ設定できます。

マルチバイト関数で数えてるので、日本語1文字を1として数えます（すごい適当な文字数にしてます）。

他のブログカードを見ると、スマホ表示時はタイトルのみ表示にしてるところが多いようでしたが、説明も入れてみました。

cssのみでは文字数制限ができないから、説明文を非表示にするといった措置になっていると思われます。

No Image画像（任意） 

    //アイキャッチ画像がない場合の画像を指定
    $no_image = 'https://*********/noimage.jpg';

php 85行目に、アイキャッチ画像が取得できない場合の画像を指定できます。
No Image用画像をメディアからアップロードしてパスを指定してください。

Embedlyをブログカードとして使おうと思ったけど、scriptを使っているので止めました（果敢にAMP対応しようとしてた）。

CSSデザイン（任意）

マテリアルデザイン風（1枚の紙が浮いてるような）にしてますが、もちろんcssも自由にカスタマイズできます。

14行目のbox-shadowを廃止し、 border: solid 1px #dcdcdc; を追加したフラットデザイン

後記

  • 仕事レベルのしっかりとしたコードでもないしテストもあまりしてません…。
  • css苦手です…。どなたかすてきなcssにしてくれると嬉しいです。
  • php部分で不具合・要望のコメントもらえたら対応できるかもしれません。
  • コード表示にGist使ったけど、script埋め込んでるので、AMP対応するときに他の方法考えないと…。
  • 非エンジニアの方でもわかりやすく書いてるつもりですが、分かりにくい表現があったらコメントくださいませ。
  • サムネイルをレクタングルにするか正方形にするか悩みどころ…。

やったほうがいいかなと思うこと

  • 外部リンク時のURLの文字数制限（はみでないように）
  • div全体をリンクにしたいけどうまくいかない…