WordPressテーマ「ADELLE」の記事一覧リストで本文を抜粋して表示する方法
こんにちは、とみーです。
ADELLEってmoreタグを入れないと記事一覧でも本文が全て表示されてしまうみたいです。
moreタグとか面倒で一々入れてらんねーってものぐさな自分のために、自動で本文を抜粋してくれるようにプログラムを書き換えたいと思います。
※システムをいじるので自己責任でお願いします。
Adelle: content-list.phpを書き換える
<?php the_content(); ?>↓ 変更
<?php echo mb_substr(strip_tags($post-> post_content), 0, 200).'...'; ?><a href="<?php echo get_permalink(); ?>">▼ more</a>200という数字はテーマのレイアウトによってご自身で変更してください。200文字ということではないみたいです。
▼ more はお好きな表記でどうぞ。
せっかくなので色んなパターンを作ってみました
これだけで終わって貧相な記事になりそうだったので、▼ more の部分を色んな形で装飾したパターンを作成してみました。
<?php echo mb_substr(strip_tags($post-> post_content), 0, 200).'...'; ?><div style="width:100%; text-align:right; margin-top:10px;"><span style="background:#DA6272; padding:10px;" class="radius-100"><a href="<?php echo get_permalink(); ?>" style="color:#fff;">▼ more</a></span></div>
<?php echo mb_substr(strip_tags($post-> post_content), 0, 200).'...'; ?><div style="width:100%; text-align:right; margin-top:10px;"><span style="display:inline-block; width:30%; background:#fff; padding:5px; border:#DA6272 1px solid; text-align:center;" class="radius-100"><a href="<?php echo get_permalink(); ?>">▼ more</a></span></div>
<?php echo mb_substr(strip_tags($post-> post_content), 0, 200).'...'; ?><div style="width:100%; text-align:right; margin-top:10px;"><span style="display:inline-block; width:30%; background:#fff; padding:5px; border:#DA6272 3px dotted; text-align:center;" class="radius-100"><a href="<?php echo get_permalink(); ?>">▼ more</a></span></div>補足
class="radius-100″はADELLEの独自クラスです。
上記のソースをADELLE以外でお使いになる場合、style.cssに以下をコピペしてからご使用ください。
.radius-100 {-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;}