当サイトは広告収入で運営しています

自作ショートコードでサムネイルなしのシンプルなブログカードとタイトルだけのテキストリンクを表示する

このページにいいね!する

Cocoonを愛用しています。デフォルトでこういうブログカード↓が使えて便利なのですが、

これとは別で、こんな感じ↓のもうちょっとシンプル&省スペースなブログカードを使いたいな、とか

単純に記事タイトルだけの、こういうテキストリンク↓を貼りたいなと。

いろいろ調べてみた結果、ショートコードで自作のブログカードを作る方法をアレンジさせて貰うのが一番簡単かも?と思い実装してみました。

ちなみに今回参考にさせていただいたサイトはこちら。

これを使いたい部分だけ残して、シンプル化させていただいた形です。外部リンク・内部リンクの区別はしてません。

やることは以下の3ステップ。

  • OpenGraph.phpをダウンロードしてFTPにアップロード
  • 子テーマのfunctions.phpにコードをコピペ
  • 追加CSSまたは子テーマのスタイルシート(style.css)でデザインを調整

OpenGraph.phpをダウンロードしてFTPにアップロード

詳しい解説は先ほどの参考サイトをご覧ください。

★私の環境では大丈夫でしたが、もし取得したタイトルが文字化けする場合は、参考サイトにあるようにOpenGraph.phpに一行追記する必要があります。

OpenGraph.phpをGitHubでダウンロードします↓

< > Code ▼ → Download ZIP

zipファイルを解凍すると3つファイルが入っているので、「OpenGraph.php」をFTPにアップロードします。

ロリポップ! の場合:ユーザー専用ページ → サーバーの管理・設定 → ロリポップ!FTP

【アップロード場所】(自サイトのフォルダ)→ wp-content → themes → cocoon-child-master

アップロードボタン(左上)をクリック → ファイルを選択する → 「OpenGraph.php」を選択 → アップロードする

アップロードした後、「このフォルダの中のファイル」にOpenGraph.phpが入っていればOK。

子テーマのfunctions.phpにコードをコピペ

ワードプレス管理画面 → 外観 → テーマファイルエディター → Theme Functions(functions.php)

サムネイルなしのシンプルなブログカード

こういう↓タイトルとファビコン+URLのシンプルなブログカード(リンクカード)の場合

以下のコードを子functions.phpコピペ → ファイルを更新

/* 【シンプルなブログカード】ショートコード作成 */
function show_Linkcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));

//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);

//OGPタグからタイトルを取得
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title;//title=""の入力がある場合はそちらを優先
}

//ファビコンを取得(GoogleのAPIでスクレイピング)
$host = parse_url($url)['host'];
$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
if($searchFavcon){
$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
}

//ブログカードHTML出力
$simple_Linkcard .='
<div class="simple_Linkcard">
<a href="'. $url .'" target="_blank">
<div class="simple_Linkcard_content">
<div class="simple_Linkcard_title">'. $Link_title .'</div>
<div class="simple_Linkcard_link">'. $favicon .' '. $url .'</div>
</div>
</a>
</div>';

return $simple_Linkcard;
}
//ショートコードに追加
add_shortcode("simple_Linkcard", "show_Linkcard");
コピーする

★もしファビコンが表示されない!という場合は、上記のコードに余分なスペースや全角文字などが混ざっている可能性があります。

ショートコードはこちら。単語登録しておくと便利。

[simple_Linkcard url="記事のURLを貼り付け"]

コピーする

まれにタイトルが取得できないページもあるので、title=””に文字を入れると、その通りに表示されます。

[simple_Linkcard url="記事のURLを貼り付け" title="任意のタイトルを入力"]

コピーする

並べるとこんな感じ↓(追加CSSまたは子テーマのスタイルシートに後述するコードの追記が必要です)


上はタイトル変更なし、下はタイトル変更ありです。

タイトルだけのテキストリンク

今度はこういう↓ファビコン+タイトルだけのテキストリンクの場合

実は今回私がやりたかったのはこのテキストリンクの方。さっきのシンプルブログカードはオマケと言うか。

単純にタイトルだけのテキストリンクを貼りたい時が多々あるのですが、タイトルをコピペ→URLもコピーしてきてリンクをかける、という作業が地味に面倒。

元の記事のタイトルが変更されると手動で修正しないといけないのも面倒だなって(^^;

でも、ブログカードとしてリンクを貼れればURLのコピペだけで済むし、元記事のタイトルが変更になっても自動で反映してくれるから楽ちんだなと思ったのです。

以下のコードを子functions.phpコピペ → ファイルを更新

/* 【ファビコン+タイトルのテキストリンク】ショートコード作成 */
function show_TitleLink($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));

//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);

//OGPタグからタイトルを取得
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title;//title=""の入力がある場合はそちらを優先
}

//ファビコンを取得(GoogleのAPIでスクレイピング)
$host = parse_url($url)['host'];
$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
if($searchFavcon){
$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
}

//タイトルリンクHTML出力
$TitleLink .='
<div class="title-link">
'. $favicon .'
<a href="'. $url .'" target="_blank">'. $Link_title .'</a>
</div>';

return $TitleLink;
}
//ショートコードに追加
add_shortcode("TitleLink", "show_TitleLink");
コピーする

ファビコンも消して完全にテキストリンクだけにしたい場合は、29行目の「’. $favicon .’」を削除します。

もっと言えば、19~24行目の「//ファビコンを取得(GoogleのAPIでスクレイピング)~」部分も不要なのでまるっと削除してOK。

ショートコードはこちら。

[TitleLink url="記事のURLを貼り付け"]

コピーする

タイトルを変更する場合はこちら。

[TitleLink url="記事のURLを貼り付け" title="任意のタイトルを入力"]

コピーする

並べるとこんな感じ。↓


リストに入れると更に省スペース化できます↓

ちなみに、ファビコンはwwwが頭についているサイトだと取得できない場合があります。

また、サブディレクトリにサイトを作っている場合は、ルートドメインのファビコンと同一のものが表示されます。

たとえば、あかえほあかえほBLOGは色違いのファビコンを設定していますが、あかえほBLOGの方はサブディレクトリ運営なので、あかえほのファビコンが表示されます。

【ファビコンが一緒になってしまう例】

追加CSSまたは子テーマのスタイルシート(style.css)でデザインを調整

サムネイルなしのシンプルなブログカード用のCSSです。お好みでご調整ください。

ワードプレス管理画面 → 外観 → テーマファイルエディター → (Cocoon Child)Stlyesheet(style.css)に貼り付け

/******************************
シンプルブログカード
******************************/
.simple_Linkcard {
line-height: 1;
background-color: #ffffff;
border: 1px solid #ddd; /*カード枠の太さ・線の形状・色*/
border-radius: 5px;
word-wrap: break-word;
}
.simple_Linkcard a {
text-decoration: none; /*リンクの下線をなくす*/
}
.simple_Linkcard :hover {
background-color:#FFFAFA; /*カードにマウスを当てた時の背景色*/
border-radius: 5px;
}
.simple_Linkcard_title {
font-size: 1em;
font-weight: bold; /*タイトルを太字に*/
line-height: 1.4;
padding: 17px 20px 10px;
}
.simple_Linkcard_link {
font-size:0.65em;
padding:0 17px 15px 20px;
text-align: left;
}
.simple_Linkcard_link .favicon {
margin-bottom: -4px;
}
コピーする

タイトルだけのテキストリンクの方は、特にCSSを追加せずそのままで大丈夫かなと思います。

タイトルとURLをコピーしました