6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

超おすすめ!WordPressテーマ「SWELL」のカスタマイズまとめ[中級者以上向け]

13430_wordpress-swell-customize_

すでにWordPressテーマ「SWELL」を使っていて、最高のテーマだよと思っている方へ
さらに「SWELL」を良くするおすすめのカスタマイズをまとめました。

すいみん

SWELLはブロックエディターが快適で、記事を書くのが本当に楽しいです!

ちなみにWordPressテーマ「SWELL」を入れたばかりの人は下記の記事も参考にしてください。

SWELLとは?

SWELLとはWEB制作スタジオ「LOOS WEB STUDIO」が、ブログ・アフィリエイト向けのWordPressテーマとして2019年3月10日にリリースいたしました。

今現在でも最適なアップデートが繰り返されており、WordPressのブロックエディター「Gutenberg」に最も対応している非常に素晴らしいテーマです。

すいみん

いままでCocoon、JIN、SANGO、 THE SONICと人気のWordPressテーマを使い倒して来ましたが、今現在で間違いなく頭一つ抜けているテーマがこの「SWELL」です!

端的に魅力をお伝えすると下記の3つにまとめられます。

  • Gutenbergでの記事編集が使いやす過ぎて、記事執筆速度が1.5倍に!
  • SEOにこだわりたいブロガーが欲しい機能だけがしっかり揃っていて、プラグインをほとんど入れなくてすむ
  • 見た目のスタイリッシュでカスタマイズいらず(どんなに機能豊富なテーマでも見た目が微妙だとモチベは↓)
すいみん

今まで作ってきたブログを全てこのSWELLに変更したい程、おすすめできるテーマです!

SWELLで基本的にやっておくべき設定

忘れがちな追加設定をまとめました。

SEO SIMPLE PACKのプラグインを入れる

「SEO SIMPLE PACK」はSWELLと同じ制作者のプラグインです。
これを入れておかないとアナリティクスの設定SNSのOGP画像が出力されません。

アナリティクスはトラッキング IDを入力。OGPはプラグインを入れるだけで自動でタグが埋め込まれます。

SWELLでおすすめしたいカスタマイズまとめ

SWELLはよくできたテーマなので、とくにカスタマイズする必要がないのですが、高速化を考えるとできるだけ画像サイズは小さくしておきたいので、最適化を中心にカスタマイズしています。

SWELLの参照する画像のサイズを変更するカスタマイズ

SWELLで使われている画像の一例です。

項目表示画像サイズ(幅×高さ)参照される画像
アイキャッチ844px × ?original(オリジナルサイズ)
関連記事(記事下)200px × 112pxmiddle(中サイズ)
※改善されました!
関連記事(外部リンク)167px ×103pxoriginal(オリジナルサイズ)
※外部から取得するので制限は難しいとのこと
記事一覧812px × ?large(大サイズ)
投稿リスト390px × ? ~large(大サイズ)
関連記事(内部リンク)167px ×103pxmiddle(中サイズ)
SWELLで使われる画像サイズ

以前、参照している画像を変更するカスタマイズにチャレンジしたのですが、現在は子テーマから反映できなくなっているようです。※テーマを直接上書きすることになるので、カスタマイズ内容はは削除しました。

画像は基本2種類を使用しています。
できるだけ画像サイズをギリギリを設定にすることで表示の高速化を狙っています。

1, WordPressのダッシュボードから設定>メディア画面へ
2. 画像サイズを下記の画像の様に設定。※高さを0にすると横合わせでリサイズされます。

  • 記事画像とアイキャッチ large w812px
  • サムネイル系 medium w382px

ちなみにサムネイルはなぜ382pxかというと、iPhone8(16:9)のモバイル表示でのアイキャッチ画像のサイズを参考にしています。このサイズあればサムネイル系は十分という選定です。

3. あとは無駄な画像の自動生成を止めます。

  • サムネイルのサイズを全て0に
  • 隠しサムネイル(medium_large)のサイズを全て0に ※ドメイン/wp-admin/options.phpから設定できます。

以上で、オリジナルサイズと2種類の生成された画像だけでブログ画像は管理できるようになりました。
あとはその画像を参照できるように子テーマをカスタマイズしていきます。

カテゴリーページを記事化するカスタマイズ

カテゴリーページをまとめ記事化するのは昨今流行っていますが、SWELLでもこれを意識した機能が搭載されています。

カテゴリーページを記事化する方法

カテゴリーページの編集画面を開きましょう。
アイキャッチとブログパーツというところから参照する記事の設定ができます。

次にダッシュボード横にあるブログパーツ画面を開きましょう。

こちらではカテゴリーページやCTAに関する記事を書いて、先程のカテゴリー編集で記事番号を指定することで、記事内容を表示することができます。

カテゴリーページの記事リストのカスタマイズ

カテゴリー編集ページの記事一覧リストを表示するかどうかのチェックをOFFにしておきます。

あとは先程のブログパーツの記事編集で投稿リストのブロックを作成するとお好みの記事リストが生成することができます。

すいみん

個人的には特定のカテゴリーに絞り込んでh3で表示することをおすすめします。

カテゴリーページの目次

目次のショートコードを入れてあげましょう。

目次

カテゴリーページのブログカードの作り方

カテゴリーカードやブログパーツの記事番号で関連記事を作成しても、うまくリンクが飛ばせません。
カテゴリーページのブログパーツはHTMLで手動で作成しておきましょう!再利用ブロック化しておくと便利です。

<div class="swell-block-postLink ">
        <a href="★記事のURL" class="p-blogCard -internal" data-type="type1">
            <div class="p-blogCard__inner"><span class="p-blogCard__caption">あわせて読みたい</span>
                <div class="p-blogCard__thumb c-postThumb">
                    <figure class="c-postThumb__figure">
                        <img src="★画像URL" alt="★画像名" class="c-postThumb__img -no-lb">
                        </figure>
                </div>
                <div class="p-blogCard__body">
                 <span class="p-blogCard__title">★記事タイトル</span>
                   <span class="p-blogCard__excerpt">★記事のディスクリプション</span>
                </div>
            </div>
        </a>
    </div>
すいみん

個別記事↔まとめ記事(カテゴリーページ)の設計は有効なので、しっかりカテゴリーページを作成しておきましょう!

ふきだしのALT属性を空にする方法(公式対応済み)

繰り返し使う画像のALTタグは空にしたほうがよいとのことで、SWELLでのふきだしのALTタグを空にする方法です。

変更箇所 shortcode.php 320行目

alt=”‘ . $bln_name . ‘のアイコン画像”

alt=””

こちら最新のSWELLのアップデートでaltが空になりました!

目次下にウィジェットを追加する方法

下記の画像のような感じで、最初の見出しの上、目次の下に専用のウィジェットを追加してあげます。

すいみん

プロフィールやキャンペーンなどを訴求してあげると効果的です!

自動で目次へ戻るリンクを挿入

H2タグの上に目次へ戻るのアンカーリンクを追加します。

すいみん

目次の項目ごとに記事を見返したりできます!

目次をハイライトする

2021/3/30 スクロールがおかしくなる不具合を修正しました。

ZIMAさんのTHE SONIC用の目次スクロールをSWELL用にしてみました。
cssとfunctions.phpにコードを入れてみて下さい。(CSSなお好きな色を指定)

ステップの見出しをh3にする

ステップの見出しを目次にも表示されるようにh3にしてみました。

ついでに、ステップがどこで終わるかわかりにくかったので、背景に色をつけました。

SWELLのトラブル

こちらではテーマで起きたトラブルについて随時、追加していきます。

トップページのカテゴリーの文字色を変更できない

記事一覧リスト>カテゴリーの文字色から変更できます。

アーカイブのページ送りの文字色の変更ができない

span.page-numbers.current {
	color:#333;
}

記事内のカテゴリーの文字色の変更ができない

.c-categoryList__link {
    color:#333;
}

見出しの文字色の変更ができない

.post_content h2 {
	color:#333;
}

編集画面の見出しの文字色が変更できない

子テーマ直下にeditor-style.cssというファイルをアップロードする。

editor-style.cssの中身のCSSは下記を参考に

.editor-styles-wrapper [data-type="core/heading"] h2, .editor-styles-wrapper h2[data-type="core/heading"], .mce-content-body h2 {
    color: #333!important;
}

あとはfunctions.phpに下記の記述を入れてCSSを読みこむだけです。

add_action( 'enqueue_block_editor_assets', 'gutenberg_stylesheets_custom' );
function gutenberg_stylesheets_custom() {
  $editor_style_url = get_theme_file_uri('/editor-style.css');
  wp_enqueue_style( 'theme-editor-style', $editor_style_url );
}

ボタンの文字色の変更ができない

.is-style-btn_normal a {
    color:#333;
}

編集画面でh2の見出し表示が崩れる

原因はわからないですが、一度違うテーマに切り替えてからSWLLの子テーマに切り替えたら直りました。

パンくずで記事タイトルまで表示されない

下記のCSSを挿入して非表示状態をクリアしてあげます。

.single span.p-breadcrumb__text {
diplay:block;
}

特定記事のアドセンス広告の非表示方法

アドセンスを表示させたくない記事の編集画面から「目次前を隠す」「自動広告を停止する」にチェックを入れましょう。

もし記事中広告のカスタマイズをしている場合は事前に記事IDを調べた上で下記の様にコードを付け加えましょう。

複数の記事を除外したい場合は、7行目をif ( !is_single('177','433','688') )というような記述をしましょう。

SWELLのカスタマイズまとめ

本記事では「超おすすめ!WordPressテーマ「SWELL」のカスタマイズまとめ」を書きました。
カスタマイズ記事といいつつ、本当に最小限のチューニングで済むので助かります!

  • Gutenbergでの記事編集が使いやす過ぎて、記事執筆速度が1.5倍に!
  • SEOにこだわりたいブロガーが欲しい機能だけがしっかり揃っていて、プラグインをほとんど入れなくてすむ
  • 見た目のスタイリッシュでカスタマイズいらず(どんなに機能豊富なテーマでも見た目が微妙だとモチベは↓)
すいみん

もう一度、書きますが本当に素晴らしいテーマなので、ぜひWordPressのテーマ選びに悩んでいる方に勧めたいです。

おすすめのWordPressテーマ「SWELL」

すいみん

SWELLの特徴をまとめました!

【SWELL】今、一番のおすすめWordPressテーマ「SWELL」の紹介

カテゴリーごとにグローバルメニューとフッターの内容を変更する

すいみん

疑似ですが、特化ブログ的な見せ方もできます。

【SWELL】カテゴリーごとにヘッダーのグローバルメニューとフッターの内容を変更する方法[WordPress]

目次
閉じる