漫画・小説・ビジネス書なんでも最大100冊分が半額

【STORK】の関連記事(リンクカード)を超カスタマイズ

ストーク関連記事カスタマイズ

この記事では、当サイトで使用している「WordPressテーマ「ストーク」 」に標準装備されているショートコード「リンクカード」のカスタマイズ方法を書きました。

細かくカスタマイズ「枠線」「タイトル」「ラベル」「投稿日」「マウスを乗せた時のカラー」できるよう1つずつコードの解説をしています。

まず「WordPressテーマ「ストーク」 」はデフォルト機能でも以下の4パターンで表示できるようになっています。

関連記事「ラベルあり」1つの記事

ストーク関連記事サンプル

ショートコード

[Kanren postid="記事のID"]
補足

以下全てのコードでKanren部分の「K」を大文字にしていますが、本来は小文字です。

カスタマイズ後にデフォルトコードを載せると、実際に関連記事が表示されてしまいコードが表示できなかったので、「K」だけ大文字にしています。

ちとしさんより、アドバイスを頂き、ショートコードを記事中に文字列として表示させたい場合は、コードを[]で囲むと良いそうです。

今回の場合であれば[[kanren postid="記事のID"]]のように入力すればOKのようですね。

他の方にも参考になるよう、私の間違えはこのまま載せておきます。

関連記事「ラベルあり」複数の記事

ストーク関連記事複数サンプル

ショートコード

[Kanren postid="記事のID,記事のID"]
ポイント

ID同士の間を「,」で区切る。

関連記事「ラベルなし」1つの記事

ストーク関連記事ラベルなしサンプル

ショートコード

[Kanren2 postid="記事のID"]
ポイント

kanrenの後に「2」をつける。

関連記事「ラベルなし」複数の記事

ストーク関連記事ラベルなし複数サンプル

ショートコード

[Kanren2 postid="記事のID,記事のID"]
ポイント

kanrenの後に「2」をつけ、ID同士の間を「,」で区切る。

ということで、ここからカスタマイズをしていきます。

カスタマイズは必ず子テーマを使いましょう。まだ導入していない方はこちらの記事を参考に。

WordPress子テーマCyberduckの使い方WordPressの子テーマを分かりやすく解説

STORK-リンクカードの枠線をカスタマイズ

style.css
.related_article.cf a{
 border:solid 1px #000;/*枠線の種類、太さ、カラー*/
 border-radius:2px;/*枠線の角を丸める*/
 background-color:#fffff9;/*カード内背景カラー*/
 position:relative;/*枠線の相対位置*/	
}
補足

position:relative;は後ほど解説する「関連記事ラベル」の位置調整に使います。

枠線の種類はこちらを参考に。

border線デザインborder線の種類別ーHTML&CSSデザイン14選

STORK-リンクカード内ラベルをカスタマイズ

リンクカード内の「ラベル表示あり」を使う場合は、デフォルトでは黒い背景に白字で「関連記事」と表示されています。

ラベル表記ありの問題点
  • スマホで見たときに、ラベルが小さくなり「関連」と2文字分しか表示されない。
  • ラベルとタイトルが繋がっているためバランスが悪い

ストーク関連記事スマホ表示

そこで「ラベル」と「タイトル」を切り分けます。

今回はこんな感じにしてみました。

ストーク関連記事ラベルカスタマイズ

style.css
/* デフォルトのラベルを消す */
.related_article .ttl:before {
display:none;	
}
/* 新しいラベルを追加 */
.related_article a:before {
position:absolute;
bottom:0;	
right:0;
content:'この記事を読む';
color:#fff;
font-size:90%;
background:#f46b6b;
font-weight:bold;
padding:3px;
}

アイコンはFontAwesomeを使用しているので、導入がまだの方はこちらへ

ストークFont-AwesomeアップデートSTORKでFont Awesome 5アップデート後に修正したところ

「この記事を読む」は好きな文字に変更して下さい。

STORK-リンクカード内のタイトル変更

ストーク関連記事タイトルカスタマイズ

タイトルを変更するとしたら、カラーやフォントサイズくらいですかね。

style.css
.entry-content .related_article p.ttl{
ここにcolorfont-sizeのCSSを書く
}

STORK-リンクカード日付変更

ストーク関連記事日付カスタマイズ
style.css
 .entry-content .related_article .date {
ここにCSSを書く
}

例えば

font-weight:bold;を追加すれば太字にできます。

display:none;を追加すれば日付は非表示になります。

STORK-リンクカードにマウスオーバー時の変更

デフォルトでは、薄い黄色が指定されています。

ストーク関連記事マウスオーバー

カスタマイズ後

ストーク関連記事マウスオーバーカスタマイズ
style.css
/*マウスオーバー背景カラー*/
.entry-content .related_article a:hover{
background:#eee;	
}
/*マウスオーバーテキストカラー*/
.entry-content .related_article p.ttl:hover{
color:#555;
}

ショートコードを登録しておこう

関連記事コード」はよく使うと思うので、「AddQuicktag」というプラグインに登録しておくと便利です。

登録しておくと、下記のように投稿の編集エディター画面にドロップダウンで表示されるので、そこから選ぶだけでコードを使えます。

WordPress・エディター

「AddQuicktag」のマニュアル書はこちら。

AddQuicktagの設定AddQuicktagの使い方と設定【隠れた機能も全て解説】

記事IDの確認方法

WordPress 記事のID

「管理画面」→「投稿」→「投稿一覧」→「表示させたいタイトルにマウスを合わせる」

注意

関連記事機能は、固定ページとランディングページのIDは使えません。

毎回記事IDの確認が面倒だという方は、投稿一覧画面に表示できるカスタマイズコードをこちらの記事に書いています。

WordPressのfunctionsカスタマイズWordPressのfunctions.phpで使える超カスタマイズコードまとめ

WordPress投稿ID確認

STORK-リンクカードカスタマイズ【まとめ】

今回のCSSコードをまとめると、以下のようになります。

style.css
/* リンクカード枠線 */
.entry-content .related_article.cf a{
 border:solid 1px #000;
 border-radius:2px;
 background-color:#fffff9;
 position:relative;
}

/* デフォルトのラベルを消す */
.entry-content .related_article .ttl:before {
display:none;	
}
/* 新しいラベルを追加 */
.related_article a:before {
position:absolute;
bottom:0;	
right:0;
content:'この記事を読む';
color:#fff;
font-size:90%;
background:#f46b6b;
font-weight:bold;
padding:3px;
}
/* リンクカードタイトル変更 */
.entry-content .related_article p.ttl{

}
/* リンクカード日付変更 */
.entry-content .related_article .date {

}

「STORK」のカスタマイズならこちらの記事もどうぞ。

2 COMMENTS

アバター ちとし

こんにちは。STORKのカスタマイズ記事参考になります。
ショートコードを紹介する時は[]で囲めばただの文字列として扱われて、機能が呼び出されることはないですよ。
今回の関連記事のショートコードなら

[[kanren2 postid=”,”]]

と入力すればOKです。僕も以前ショートコードを紹介しようと思ったらその機能が呼び出されて困ったものです(笑)
ご参考まで。

返信する
アバター カゲオ

ちとしさん
こんにちは。
カゲオです。
アドバイスありがとうございます。
早速記事を修正いたしました。
他の方にも参考になるよう、私の間違いを載せたまま修正させて頂きました。
また何かありましたら、よろしくお願いします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です