sydney

Sydney改造編 – 抜粋文のあとに「続きを読む」ボタンを設置

公開日:2018/03/03  更新日:2018/05/24

サイトロゴ・ヘッダースライダー・背景画像などのビジュアル要素を直感的にカスタマイズできる管理画面が秀逸なWordPressテーマ「Sydney」。

カスタマイズ画面「ブログ設定」の項目で「レンガ積み」を選択して、アーカイブ一覧ページのレイアウトを横3列のブロックスタイルに設定すると、サイトデザインがさらにスタイリッシュな印象になり満足度も高まります。

しかし、アーカイブ一覧ページの抜粋文のあとに表示される […] には以前からすこし違和感があり、これはなんとかせねば…と思っていました。

抜粋文のあとに「続きを読む」ボタンを設置-画像01

抜粋文のあとの […] の代わりにシンプルな「続きを読む」のボタンを追加できないものか、それもプラグイン無しで…
ということで、今回はプラグインを使わずに「functions.php」と「style.css」をカスタマイズすることで、アーカイブ一覧ページの抜粋文のあとに「続きを読む(Read More)」のボタンを追加する方法をご紹介しましょう。

以下に当サイトの子テーマ内「functions.php」と「style.css」に記述している基本的コードを開示します。
まずは「functions.php」

// 本文抜粋の末尾に「続きを読む」リンクを追加
function new_excerpt_more($more) {
   return '...<a class="readmore" href="'. esc_url( get_permalink() ) . '">' . '続きを読む →' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

続いて「style.css 」

/* 「続きを読む」のボタン化 */
.readmore {
   display: inline-block;
   *display: inline;
   zoom: 1;
   font-size: 値; /* 文字サイズ */
   color: 値 !important; /* 文字色 */
   background-color: 値; /* ボタン背景色 */
   text-align: center;
   text-decoration: none;
   padding: 値; /* パディング */
   margin: 値; /* マージン */
   border-radius: 値; /* ボタン両端の角丸 */
   box-sizing: border-box;
   float: right;
}
.readmore:after {
   content: '';
   display: block;
   clear: both;
}
.readmore:hover {
   color: 値; /* hover時の文字色 */
   background-color: 値; /* hover時のボタン背景色 */
}

これらのコードの記述により、当サイトのカテゴリー別アーカイブ一覧ページの抜粋文には「続きを読む」のボタンが追加されています。

抜粋文のあとに「続きを読む」ボタンを設置-画像02

どうしても、プラグインを使わずにWordPressテーマ「Sydney」のアーカイブ一覧ページ抜粋文のあとに「続きを読む(Read More)」ボタンを追加したいという方は、上のコードをご参照いただきながら「functions.php」と「style.css」に変更を加えてみてください。

ただし、カスタマイズはあくまでも自己責任でお願いします(子テーマ推奨)m(_ _)m。

Sydney導入サイト 制作費10%OFFキャンペーン始めました

制作費10%OFFのキャンペーンは終了しました。 ポイント還元花盛りの令和元年10月です。HideoGoto.org も制…続きを読む →

好評です!Sydney導入WPサイト制作代行 格安プラン

やっと秋らしく過ごしやすい時期になりましたね。 秋田生まれの私にとって今年の東京の夏は本当に永く苦しい修行のような日々でし…続きを読む →

Sydney改造編 – 抜粋文のあとに「続きを読む」ボタンを設置

サイトロゴ・ヘッダースライダー・背景画像などのビジュアル要素を直感的にカスタマイズできる管理画面が秀逸なWordPress…続きを読む →

Sydney改造編 – CSSでヘッダーメニュー項目に背景色を設定

直感的なカスタマイズが可能な管理画面とフロントページの全幅画像ヘッダースライダーが秀逸なWordPressテーマ「Sydn…続きを読む →

コメントなし

Sydney改造編 – CSSでヘッダーサブメニューの背景色を半透明化

★今回は分かりやすくお伝えするために【改造済みサンプルサイト】を作ってみました。宜しければご覧ください(別ウインドウで開き…続きを読む →

コメントなし

Sydney改造編 – CSSでモバイルナビゲーションの背景色を強制変更

世界中で根強い人気で当サイトでもお世話になっているWordPressテーマ「Sydney」。 PC、タブレット、スマートフ…続きを読む →

コメントなし

Sydney改造編 – CSSでヘッダースライダー内のボタンをカスタマイズ

フロントページの洗練された全幅ヘッダースライダーが魅力的なWordPressテーマ「Sydney」。 初心者でも、管理画面…続きを読む →

Sydney改造編 – CSSでヘッダースライダーのテキストをカスタマイズ

当サイトでもお世話になっているWordPressテーマ「Sydney」。 初心者でも、管理画面から直感的で多彩なカスタマイ…続きを読む →

Sydney改造編 – 投稿ページの前後ナビゲーションをカスタマイズ

フロントページの全幅画像ヘッダースライダーと都会的で洗練されたテンプレートデザインが人気のWordPressテーマ「Syd…続きを読む →

Sydney改造編 – CSSで「ページTOPに戻るボタン」の色を強制変更

当サイトでも導入しているWordPressテーマ「Sydney」には、デフォルトの状態でページ右下部に「ページTOPに戻る…続きを読む →

Sydney応用編 – Sydney Toolbox でフロントページをカスタマイズ

WordPressテーマ に「Sydney」を導入し、推奨WPプラグイン「Sydney Toolbox」をインストール&有…続きを読む →

Sydney応用編 – フロントページ全面を全幅背景画像で埋め尽す

フロントページヘッダー部分の、全面画像スライダー(5枚!)がとても魅力的なWordPressテーマ「Sydney」ですが、…続きを読む →

Sydney導入サイト 失敗しないための5つのポイント

Sydneyはシンプルなフォーマットと多彩なカスタマイズ機能を併せ持ったバランスの良いWordPressテーマです。これは…続きを読む →

Sydneyをビジネスサイト用WPテーマとしてお勧めする理由

初心者でも簡単にカッコいいブログを始められるということで、世界中で人気のWordPressテーマ「Sydney」。 外国産…続きを読む →

Sydney導入例 – WordPressサンプルサイト集

WordPressテーマ”Sydney”で制作した業種・職種別のサンプルサイト集(すべて全画面スライダー&レスポンシブデザ…続きを読む →

Sydney – テーマカスタマイズの管理画面と機能概要

レスポンシブデザイン・全画面スライダー・パララックス背景効果等、無料のテーマとは思えない豊富なカスタマイズと、都会的で洗練…続きを読む →

Sydney – 3つの推奨プラグインの機能と管理画面

フリーランスや企業用コーポレートサイトの構築に最適なWordPressテーマ「Sydney」。 このテーマの特長を最大限に…続きを読む →

Sydney – WPテーマと推奨プラグインのインストール

WordPress公式テーマのSydneyは、管理画面上からの直感的な操作により、フロントページやブログページのカスタマイ…続きを読む →

Sydney – 企業・飲食店・自営等の商用サイトに最適WPテーマ

Sydney(シドニー)といっても、高層ビルや英国風のモダンな町並み、海や緑の自然との調和が美しいオーストラリアの都市のこ…続きを読む →