いのっすブログ

使用してみたおすすめのグッズや情報を紹介します。

affinger5(WING)のブログ風カードリンクに「続きを読む」を加える方法

 2018年4月8日  

ブログカードリンクに続きを読むの文字をプラス
アフィンガー5になってから、ブログカードリンクの「続きを読む」が無くなってしまいました。

ウェブにあまり詳しくない方が見ると、リンクとわからない可能性が無くはないので、私としては欲しいところです。付け方を解説します。

※2018年4月21日追記

2018/04/17のアップデートで、ブログカードショートコード内に readmore="on" を挿入するだけで「続きを読む」が表示されるようになりました。

Affinger4から大量にブログカードショートコードを利用しておられる方は、5にアップデートした際に1つ1つ挿入し直すのが面倒と思いますので、以下の方法がおすすめです。

ショートコード内に readmore="on" を挿入せずに続きを読むを表示させる方法

アフィンガー5、親テーマ内フォルダの「functions.php」800行目あたり(「st-cardbox」でファイル内検索してみて下さい)の、 </dd> のすぐ上に次の1行を加えます。

※編集をミスすると、サイトが真っ白になって見れなくなってしまうので、編集前にfunctions.phpファイルのコピーを取ってから行うのがお勧めです。

<p class="cardbox-more"><a href="<?php the_permalink(); ?>">続きを見る</a></p>

スタイルシートの編集

↓の記述は、今の所(2018年4月8日現在)は親テーマのCSSに残されているので、子テーマCSSに追記する必要はありません。ただ、そのうちバージョンアップ時に消されてしまうかもしれないので、残しておきます。

/*続きを読む*/
.post p.cardbox-more {
	margin-bottom:5px;
}
.rankst-box .cardbox-more a {
	display:block;
}
.cardbox-more a {
	padding:5px 10px;
	box-sizing:border-box;
	border:1px solid #ccc;
	text-align:center;
	text-decoration:none;
	color:#757575;
}
.cardbox-more a:hover {
	background:#f3f3f3;
}

リンクエラーの可能性

私の場合は上記コードを追記して、カードタイプのリンクが無事に複数作れました。

ただ、以前Stinger-store公式サイトでカードタイプのリンクが複数使われていた際、「タイトルの文字」をクリックすると正しいリンクに飛んでいたのですが、「続きを読む」の方をクリックすると、別の記事に飛んでいたことがあります。

何らかのプラグインを併用するとそのようなエラーが出るのかもしれません。

スポンサーリンク

-アフィンガーカスタマイズ