リンクをカード形式で表示させる「Pz-LinkCard」

スポンサーリンク
Pocket

 

WordPressで記事を書いているときに、参考になったサイトへのリンクを貼ったりすると思います。

WordPressプラグインを使うと、ショートコードというキーワードを使ってリンク先のURLを記述すると、カード形式で表示されるようになります。

WordPress公式プラグインディレクトリに登録されているので、WordPress管理画面からインストールすることができます。

下図の感じになります

基本は、ショートコードにURLを指定するだけ

標準では「blogcard」という文字がショートコードとして指定されているので、その文字と組み合わせて、url=”リンク先URL” という感じでリンク先を指定します。

自サイト内へのリンク、「内部リンク」の場合は、そのままページが切り替わります。

自サイト以外へのリンク、「外部リンク」の場合は、クリックすると「新しいウィンドウ(タブ)」で開きます。

設定画面からデザイン(カードの背景色や背景画像、表示する幅など、ある程度のレイアウト)変更ができます。

設定画面でできること

インストールすると、「設定」に「Pz カード設定」という項目が追加されます。

基本設定

  • 「ショートコード 1」
    使用するショートコードを設定します。大文字と小文字を区別します。標準では「blogcard」が設定されています。
  • 「ショートコードで囲んだ文字列」
    ショートコードに囲まれた文字列の扱いを設定します。リンク先から取得したタイトルや抜粋文の代わりに、ショートコードで囲まれた文字を使用します。標準では「使用しない」です。(この設定はショートコード1のみに適用されます)
    inlinetext-to-title
  • 「ショートコード 2」
    複数パターンでショートコードを使用したい場合に設定します。大文字と小文字を区別します。
  • 「ショートコード 3」
    複数パターンでショートコードを使用したい場合に設定します。大文字と小文字を区別します。
  • 「定型書式」
    単体項目の組み合わせでは表現できない効果を設定します。標準では「Pz リンクカード 標準書式」になっています。ほかの項目より優先して適用されるので、カードの色などを自分で変更したい場合には「なし」に変更します。

表示設定/配置設定

カードの配置に関する設定を行います。

  • 「上の余白」
    カードの上に余白を設けます。標準では「4px」になっています。
  • 「右の余白」
    カードの右に余白を設けます。標準では「16px」になっています。
  • 「下の余白」
    カードの下に余白を設けます。標準では「16px」が設定されています。
  • 「左の余白」
    カードの左に余白を設けます。標準では「4px」になっています。
  • カードの内側/「上の余白」
    カード内側の上余白を設定します。標準では「設定しない」(7px)になっています。
  • カードの内側/「右の余白」
    カード内側の右余白を設定します。標準では「設定しない」(7px)になっています。
  • カードの内側/「下の余白」
    カード内側の下余白を設定します。標準では「設定しない」(7px)になっています。
  • カードの内側/「左の余白」
    カード内側の左余白を設定します。標準では「設定しない」(7px)になっています。
  • 「カードの横幅」
    ブログカードの最大幅を指定します。単位は「px(ピクセル・省略可能)」と「%」が使用できます。標準では「500px」が設定されています。
  • 「カードの高さ」
    記事情報(タイトル、URL、記事、サムネイル)が表示されている領域の高さを指定します。単位は「px(ピクセル・省略可能)」が使用できます。標準では「108px」が設定されています。
  • 「中央に寄せる」
    チェックを付けると、左右に余白を設けて、行の中央に表示します。

表示設定

  • 「カード全体をリンク」
    チェックが入っていると、カード枠内のどこをクリックしてもリンク先を開きます。チェックが入っていない場合は、タイトル、URL、サムネイル、サイト名称をクリックしたときリンク先を開きます。
  • 「枠線の太さ」
    ブログカードの枠線の色と太さを選びます。標準では「黒/細い(1px)」が設定されています。

表示設定/外観設定

カード外観(デザイン)に関する設定を行います。

スポンサーリンク
  • 「角を丸める」
    カードの四隅を丸くします。
  • 「サイト情報」
    サイト名称等の表示位置を変更できます。「上側」か「下側」、「なし」が設定できます。標準では「上側」が設定されています。
  • 「サイト名称を使用」
    ドメイン名の代わりにサイト名称を表示します。標準ではチェックありが設定されています。
  • 「区切り線」
    サイト情報と記事情報の間に区切り線を付けます。
  • 「リンク先のURLを表示する」
    タイトル下にリンク先のURLを表示します。
  • 「記事情報に枠を付ける」
    記事情報の部分に枠を付けて、内側に影を付けます。「ウィンドウ」のような表示にすることができます。
  • 「抜粋文を表示する」
    チェックを付けると抜粋文が表示されます。標準ではチェックありが設定されています。
  • 「サムネイル」
    サムネイルの表示位置を変更できます。「左側」か「右側」、「なし」を設定できます。
  • 「サムネイル/影を付ける」
    サムネイル画像に影を付けます。
  • 「内側に影を付ける」
    カード内側に影の効果を付けます。へこんで見えたり、紙の影のように見えます。標準ではチェックなしになっています。
  • 「影を付ける」
    カードの右下に影の効果を付けて浮いているように見せます。標準ではチェックありが設定されています。

表示設定/ソーシャルカウント設定

WebAPIを利用してソーシャルカウントを取得します。

カウントを取得するときはカードの表示に時間がかかりますが、しばらくの間はデータベースにキャッシュされます。

  • 「シェア数を表示する」
    「サイト情報の後ろ」か「タイトルの後ろ」、「なし」が選べます。「なし」以外を設定した場合、バックグラウンドでシェア数の取得を行います。標準では「サイト情報の後ろ」に設定されています。
  • 「ツイッター」
    Twitterのツイート数を取得します。(2015年11月20日以降、取得を停止します。最後に取得したカウントを表示することは可能です。)
  • 「フェイスブック」
    facebookのシェア数を取得します。
  • 「はてなブックマーク」
    はてなブログのブックマーク数を取得します。

文字設定

文字色と大きさの設定を行います。

  • 「タイトル」
    リンク先のタイトルを表示する文字色と大きさ、省略される桁数を設定します。標準では「黒色」「16px」「200文字」が設定されています。
  • 「URL」
    「リンク先のURLを表示する」にチェックを入れたときに表示されるURLの文字色と大きさを設定します。標準では「青色」「9px」が設定されています。
  • 「抜粋文」
    「抜粋文を表示する」にチェックを入れたときに表示される抜粋文の文字色と大きさ、省略される桁数を設定します。標準では「黒色」「11px」「250文字」が設定されています。
  • 「サイト情報」
    「サイト情報」を表示したときのサイト名称等の文字色と大きさ、省略される桁数を設定します。標準では「黒色」「12px」「100文字」が設定されています。

外部リンク

自サイト内では無いURLを指定したときの表示に関する設定を行います。

  • 「背景色」
    カードの背景色を設定します。標準では白色が設定されています。
  • 「背景画像」
    画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
  • 「サムネイル」
    サムネイルの取得方法として「なし」か「WebAPIを利用する」が設定できます。標準は「なし」に設定されています。
  • 「サイトアイコン」
    サイトアイコン(ファビコン)の取得方法として「なし」か「WebAPIを利用する」が設定できます。標準は「WebAPIを利用する」になっています。
  • 「サイト情報」
    サイト名の横に表示する文字列を指定します(例.「(外部サイト)」)。
  • 「新しいウィンドウで開く」
    チェックを入れておくと、クリックしたときに、新しいウィンドウまたはタブで開きます。標準ではチェックありになっています

内部リンク

自サイト内のURLを指定したときの表示に関する設定を行います。

  • 「背景色」
    カードの背景色を設定します。標準では白色が設定されています。
  • 「背景画像」
    画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
  • 「サムネイル」
    サムネイルの取得方法として「なし」か「直接取得する」、「WebAPIを利用する」が設定できます。標準は「直接取得する」になっています。
  • 「サイトアイコン」
    サイトアイコン(ファビコン)の取得方法として「なし」か「直接取得する」、「WebAPIを利用する」が設定できます。「直接取得する」はWordPress4.3.0以降で有効です。標準は「直接取得する」になっています。
  • 「サイト情報」
    サイト名の横に表示するテキストを設定します(例.「(サイト内)」)。
  • 「新しいウィンドウで開く」
    チェックを入れておくと、クリックしたときに、新しいウィンドウまたはタブで開きます。標準ではチェックなしが設定されています。
  • 「記事取得方法」
    内部リンクの記事の取得方法を指定します。「抜粋文が設定されている投稿はそちらを優先する」を指定すると抜粋文が設定されている記事はそちらから表示されます。「カード管理画面に記載されている内容から表示する」を指定すると外部リンク同様、キャッシュから表示します。標準では「常に最新の記事内容から抜粋文を作成する」が設定されています。

同ページへのリンク

記事と同一のURLを指定したときの表示に関する設定を行います。

設定できない項目は「内部リンク」の設定と共通です。

  • 「背景色」
    カードの背景色を設定します。標準では淡い灰色が設定されています。
  • 「背景画像」
    画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
  • 「サイト情報」
    サイト名の横に表示するテキストを設定します。

画像取得APIの指定

画像取得に使用するWebAPIに関する設定を行います。

  • 「ファビコンの取得API」
    ドメイン名の左側に表示するサイトアイコンの画像URLを指定します。通常は画像取得WebAPIのURLを記述しますが、自分で用意した画像URLを指定することもできます。標準ではGoogleのファビコン取得APIのURLが設定されています。
  • 「サムネイル画像の取得API」
    サムネイルの取得方法を「WebAPI」に設定した場合、このURLを使用して画像を取得します。
次の文字列は、置き換えて使用されます。

  • %DOMAIN_URL%
    「http://」や「https://」から始まるドメイン名に置き換わります。(例.https://popozure.info)
  • %DOMAIN%
    「http://」や「https://」を抜いたドメイン名に置き換わります。(例.popozure.info)
  • %URL%
    esc_urlによってURL文字列に変換したリンク先URLに置き換わります。

 

詳しい解説は下記サイトを参照下さい。

 

スポンサーリンク