SWELL &#8211; ケケンタの独学ITブログ

参考：【2025調査】WordPressテーマのおすすめ人気シェアランキング【有料/無料、日本/海外、企業/ブログ】

WordPressテーマなのにページごとのカスタマイズの自由度が高い

これもめちゃくちゃうれしいポイントです。

TCDテーマなどを使ったことのある方なら共感していただけるかと思いますが、有料テーマは簡単にWebサイトを構築できる反面、レイアウトなどの調整がしづらく、かなりテーマに依存してしまうことが多いです。

しかし、SWELLでは先ほどもお伝えしたブロックエディタがつよつよなので、組み合わせ次第で柔軟なページカスタマイズ可能です。

トップページだけでなく、カテゴリーページのような記事一覧ページや固定ページごとにカスタマイズできるのもグッドポイントです。

先ほどもちらりと提示しましたが、SWELL公式サイトのようなページも作成可能です。

🎯 自由度の高さが魅力
他のテーマでは諦めていたレイアウトも、SWELLなら実現できます。

利用者が多いためカスタマイズ情報が豊富

SWELLは有料テーマということもあり、本当に機能が豊富で、カスタマイズ性も高いのが特徴です。

それゆえに

ケケンタ

こんなに機能があっても使いこなせないし、カスタマイズなんて言われてもどうすれば良いかよくわからないよ……

といった悩みが発生しがちです。

しかし、SWELLは無料テーマCocoonをおさえ、日本国内シェア率１位です。

そのため、利用者が多く、大抵のカスタマイズ方法は調べればすぐにわかる環境がインターネット上に整っています。

ちなみにWeb制作者の方向けのお話にはなりますが、SWELLにはフィルター・アクションフックもたくさん用意されているので、その辺りの知識をお持ちの方であれば高度なカスタマイズも可能です。

📚 情報量が豊富
困ったときもすぐに解決方法が見つかります。

頻繁にアップデートされている

WordPressテーマにおけるアップデートの意味合いは様々です。

機能の追加・改善
不具合修正
セキュリティ対策
WordPressアップデートへの対応

SWELLでは頻繁にアップデートされており、WordPress本体のアップデートにもすぐ対応されます。

また、軽微な不具合修正や機能調整、処理速度改善などのアップデートが実施されており、利用している側としても本当に安心して利用を継続できます。

🔄 常に最新の状態を維持
セキュリティ面でも安心して使えます。

＼　無料デモあり!!　／

今すぐSWELLをチェックする　>>

SWELLのメリット

ここまでですでにSWELLの魅力は十二分に伝わったかと思います。

が、まだ迷われている方もいらっしゃるかと思うので、実際に僕がSWELLを使用している中で感じているメリットをお伝えします。

やっぱりブロックエディタが素晴らしい

先ほども述べましたが、やはりブロックエディタが素晴らしすぎます。

見出しや本文の装飾はもちろんのこと、リストやテーブル、Q&AやABテストなんていうものもプラグインなしで使用できます。

ケケンタ

SWELLを使えば記事を書くこと自体に思いっきり集中できるんです！

デザインが良い

SWELLはシンプルでありながらデザインがとても綺麗です。

まさにいまどきなサイトを簡単に作成できます。

ケケンタ

デザインのことをよく分かっていない身として、ただSWELLの機能を使うだけで綺麗なサイトをサクサク作れちゃうのが本当にうれしいんです！

SWELLのデザインは好きですか？: めちゃくちゃ好きです！

テーマの移行が簡単！

CocoonからSWELLに乗り換えるとき、ここが正直一番心配でした。

しかし、結論から言うと、まったく問題なくSWELLへの移行を完了することができました！

すべてのテーマに対応してるわけではありませんが、SWELLでは、Cocoonのような一部の有名テーマ用に乗り換えサポート用プラグインが用意されています。

参考：他テーマからSWELLへの「乗り換えサポートプラグイン」一覧 – SWELL公式サイト

本当なら、テーマを変えるとそれまで使用していた独自のショートコードやCSSが適用されなくなり、デザインが一気に崩れてしまいます。

しかし、乗り換えサポート用プラグインを使用することで、旧テーマのデザインを維持したままSWELLへ移行することができるんです！

これにより、全記事の修正作業に自分のペースで取り組めます。

ケケンタ

記事数が多いと一気に全記事のデザイン修正をするのは物理的に不可能なので、SWELL開発者の了さんにはこのようなプラグインをご用意いただいて本当に感謝しています！

ちなみにSWELLから別のテーマへ乗り換えるのも楽なので、それもまためちゃくちゃスゴイです！（僕はずっとSWELLを使い続けるつもりですが！）

🔄 移行の不安を解消
既存のデザインを維持したまま移行できます。

サポートフォーラムがある

SWELL購入者の特権で、サポートフォーラムを利用できます。

例えば、SWELLには無い機能をプラグインで導入しようとしたときに、相性の関係から不具合が起こることが稀にですが、あります。

そうしたときの相談先としてサポートフォーラムが用意されているのです。

僕もサポートフォーラムの中を閲覧してまわったことがありますが、開発者様自身が回答してくださっていることも多々あり、テーマ利用者にとても親身になってくださっている、という印象でした。

ちなみに先ほどもお伝えしましたが、SWELLは本当にネット上の情報量が豊富なので、ちょっとした問題であればすぐに解決できるかと思います。

🆘 安心のサポート体制
開発者直々のサポートが受けられます。

知識不要でページごとのカスタマイズが可能

当ブログのトップページなんかがそうですが、カテゴリーごとにセクションを用意したレイアウトにしたり、ちょっと印象強く見せたいセクションだけ固定背景にしたりといった構造にしています。

……ですが、これ全部、知識も何もいらずに、ただブロックエディタを配置してクリックで設定していっただけなんです。

ケケンタ

ブロックエディタが本当につよつよで、オシャレなサイトが誰でも簡単に作れちゃうのがやっぱりうれしいです！

GPL100％で複数サイトに利用できる

前述したようにSWELLはGPL100%の有料テーマなので、自分の所有サイトであれば複数サイトで使用可能です。

これが本当にうれしい。

買い切りなので１サイトで１年使えば一か月あたり1500円ほど。

この時点でアドセンス収益で十分もとが取れる可能性すらあるのに、そのうえ複数サイトで使えるとなると……

ケケンタ

SWELL開発者の了さんはちゃんと正当な収益を得られているんだろうか……

真面目にこんなことを考えたりしました。

それだけお得すぎるテーマなのは間違いありません。

僕はいまのところ当ブログしか運営していませんが、今後も別テーマのブログ運営をしてみたいと考えているので、そのときもSWELLを利用するつもりです。

💰 投資対効果が抜群
複数サイトで使えば使うほどお得になります。

＼　17,600円・買い切り　／

SWELLのデメリット

SWELLのデメリットについてです。

……が、しばらく考えてみたのですが、正直本当にこれというものがありません。

ケケンタ

揚げ足取りのようになってしまいますが、強いて言うなら次の２つぐらいでしょうか……

機能が多すぎて使いこなすのに時間がかかる

SWELL、本当にたくさんの機能が搭載されています。

ブロックエディタのスタイルの豊富さはもちろん、パーツ管理や広告管理、高速化設定やPV計測などなど。

正直、たくさんありすぎて僕は使いこなすのに時間がかかりました（というかいまも使えてない機能がちらほらあります……）

それだけハイスペックなテーマということなのに、買い切り＋複数サイトで利用可能だなんて、やはりSWELL最高です。

📚 段階的に学べる
最初は基本的な機能から始めて、徐々に高度な機能を使いこなしていけます。

無料ではなく有料のため初心者にはハードルが高い

SWELLのような有料テーマだと、これから初めてブログを始めるという方にとってはハードルが高いかなと思います。

僕も初めてブログを開設したのが2024年の秋頃でしたが、そのときはブログを継続できる自信がなかったため、まずは無料テーマのCocoonから使い始めてみました。

それから半年ほどで「これならブログ継続できそう！」と判断し、SWELLに乗り換えました。

ケケンタ

前述しましたが、SWELLでは乗り換えサポート用プラグインがあるため、まずはCocoonから使い始めて、どこかのタイミングでSWELLに乗り換えるというのも全然ありだと思います。

ただ、いくら乗り換えサポート用プラグインがあるといっても無料テーマから完全移行するための修正時間は必要です。

そのため、もしブログを継続することに自信があるのであれば、最初からSWELLを使った方が時間が無駄になりません。

💡 初心者でも安心
無料デモで試してから購入を決めることができます。

SWELLの無料デモを試す　>>

SWELLに変えて良かったこと

僕がSWELLに変えて良かったと思う３つのポイントです。

ブログ全体のデザインが良くなった
記事を書くのが楽しくなった
ブログのカスタマイズや記事の装飾にかかる時間の短縮

ブログ全体のデザインが良くなった

決してCocoonのデザインを否定するわけではないのですが、個人的にはSWELLに乗り換えたことでブログ全体がシンプルでおしゃれな見た目になったと感じています。

（Cocoonのデザインは「かわいい」という印象のデザイン＝スキンが多いと感じています）

SWELLのデザインは、特に「いまどき感」があってとても気に入っています！

そして、これは度々お伝えしていますが、このおしゃれなデザインがSWELLのブロックエディタを使えば簡単に再現できるのがうれしいです。

記事を書くのが楽しくなった

見た目が良いと、書き手にとっても読み手にとってもプラスになります。

ケケンタ

ブログ開設時期も関係しているのだとは思いますが、SWELLに変えてからユーザーの滞在時間や閲覧数がいい感じに伸びていきました！

それにともない「もっと記事を書きたい！」と楽しい気持ちが駆り立てられています。

ブログを継続するには、なんといっても「自分の書いた記事がより多くの人に読んでいただけること」が大切だと思っています。

SWELLはそれを形にしてくれたテーマなので、本当の本当に感謝しています。

ブログのカスタマイズや記事の装飾にかかる時間の短縮

SWELLのブロックエディタを使うことで、記事の装飾にかかる時間が大幅に短縮されました。

以前はCSSを書いたり、プラグインを探したりする時間が多かったのですが、今ではクリック操作だけで美しい記事が作れます。

⏰ 時間短縮効果
記事作成時間が約30%短縮されました。

SWELLはこんな人におすすめ！

最後に、「SWELLはどのような人におすすめか？」をお伝えします。

HTMLやCSSなどの専門知識がない人
おしゃれでシンプルなデザインのブログを作りたい人
ブログを本格的に始めたい人

SWELLが持つ最大の魅力はなんといっても

ブログ運営者が記事を書くことに集中できること

です。

HTMLやCSSなどの専門知識やデザインの経験もない……だけど本格的にブログを始めたい！

そんな思いを形にしてくれるWordPressテーマです。

これからブログを始めたい、あるいはどの有料テーマを使ってみようか迷われている方は、ぜひ『SWELL』も候補のひとつとして考えてみてください。

まとめ

SWELLに乗り換えて本当に良かったと心から思っています。

特に以下の点で大きな改善を実感できました：

サイト表示速度の向上（PageSpeed Insights 45点→85点）
デザインの改善（シンプルでおしゃれな見た目）
記事作成効率の向上（作成時間30%短縮）
ユーザーエンゲージメントの向上（滞在時間・閲覧数増加）

ケケンタ

投資対効果も抜群で、月額換算1,650円で複数サイト利用可能というのは本当にお得です。

今すぐ始めれば、あなたのブログも変わるかもしれません。

それでは、最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【SWELL】関連記事を任意の場所に表示する方法【ショートコード】

ケケンタ — Thu, 20 Jun 2024 07:27:17 +0000

この記事ではSWELLで

ショートコードを使用して「関連記事」を任意の場所に表示する方法

をご紹介します。

SWELLの「関連記事」はデフォルトだと決められた場所に表示されますが、

今回ご紹介する方法を使用することで自分の好きな場所に「関連記事」を表示できるため、上手く活用することで回遊率を高めることが可能です。

ケケンタ

本記事の内容がお役に立てば何よりです！

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【全体の流れ】ショートコードで「関連記事」を任意の場所に表示する

ケケンタ

この記事でご紹介する内容の流れをザックリまとめると以下のようになります。

ショートコードを使用して「関連記事」を任意の場所に表示する流れ

SWELLのデフォルト機能で出力されている「関連記事」のHTML構造に基づき、記事ごとの出力用HTMLを用意する
表示中の投稿の「関連記事」をWP_Queryで取得する
①で書いた処理と②で取得したデータをループで回して「関連記事」を出力する
ここまでの処理①～③をショートコードに登録して任意の場所で表示できるようにする

ソースコード

ソースコード全体は以下の通りです。

以下２つのソースコードをfunctions.phpに追記し、ショートコード「my_short_create_related_post_list」を任意の場所に記述するだけで「関連記事」を出力できます。

※子テーマのfunctoins.phpにソースコードを追加する手順はこちら（この記事内の別項目に移動します）

記事ごとの出力用HTML

function create_related_post() {
  // サムネイル（サムネイルの有無によって表示する画像をサムネイル or NO IMAGE画像を設定）
  $thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK
  $permalink = get_the_permalink();   // 記事リンク
  $title     = get_the_title();       // タイトル
  $date      = get_the_date('Y-m-d'); // 公開日

  // 関連記事のHTML
  $html  = <<
      
        
          
            
          
        
        
          {$title}
          
            
              {$date}
            
          
        
        
    
    CURRENT_POST;

  return $html;
}

「WP_Queryで取得した関連記事をループで取得する処理」をショートコードに登録

function create_related_post_list() {
  $html  = '';
  $html .= '関連記事';
  $html .= '';

  // 関連記事の呼び出し
  $args = array(
    'post_type'       => 'post',                      // 「投稿」の記事を取得
    'category_name'   => get_the_category()[0]->slug, // 表示中の記事のカテゴリーを指定
    "post__not_in"    => [get_the_ID()],              // 表示中の記事は「関連記事」に含めない
    'posts_per_page'  => 8,                           // 8件の記事を取得する（※調整可能）
  );
  $the_query = new WP_Query( $args );

  if ( $the_query->have_posts() ) :  
    while ( $the_query->have_posts() ) : $the_query->the_post();

      // 関連記事をひとつずつ取得
      $html .= create_related_post();
    
    endwhile;
  endif;
  wp_reset_postdata();

  $html .= '';

  echo $html;
}
add_shortcode('my_short_create_related_post_list', 'create_related_post_list');

ケケンタ

ご興味のある方に向けて、以下より簡単に解説をしていきます。

解説

① 記事ごとの出力用HTML

今回、「関連記事」のHTML構造をあえてSWELLで使用されているものと同じものにしています。

理由

構造をまったく同じにすればSWELLでデフォルトで使用している「関連記事」と同じ見た目になる
SWELLで設定した内容が今回作成する「関連記事」の見た目にも反映されるようになる

ここで言っている構造とは、HTMLタグだけでなく、classや属性などすべてを含めたものを指しています。
実際のSWELLデフォルトの関連記事のHTML構造はGoogle chromeの検証ツールで確認できます。

デフォルトの「関連記事」の構造を引用して組み立てたのが以下のソースコードです。

デフォルトの「関連記事」の構造を引用して組み立てたソースコード

function create_related_post() {
  // サムネイル（サムネイルの有無によって表示する画像をサムネイル or NO IMAGE画像を設定）
  $thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK
  $permalink = get_the_permalink();   // 記事リンク
  $title     = get_the_title();       // タイトル
  $date      = get_the_date('Y-m-d'); // 公開日

  // 関連記事のHTML
  $html  = <<
      
        
          
            
          
        
        
          {$title}
          
            
              {$date}
            
          
        
        
    
    CURRENT_POST;

  return $html;
}

３～９行目では記事ひとつひとつのアイキャッチ画像や個別ページへのリンク、タイトル、日付を取得しています。

ちなみに以下の部分で設定しているURLは「アイキャッチ画像が未設定だった場合に出力される画像のURL」です。

アイキャッチ画像が未設定だった場合に出力される画像のURL

$thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK

上記のソースコードではSWELLでデフォルトで用意されているno_img.pngを指定しています。

そして以下の部分に各情報を当て込み、このあと改めてご紹介するループ処理で記事ひとつひとつが正しく出力されるように構造を整えています。

HTML内に取得済みの各情報を当て込んでいる

// 関連記事のHTML
$html  = <<
    
      
        
          
        
      
      
        {$title}
        
          
            {$date}
          
        
      
      
  
  CURRENT_POST;

②「WP_Queryで取得した関連記事をループで取得する処理」をショートコードに登録

２つ目にご紹介したソースコードでは

まずWP_Queryで現在表示中の投稿の「関連記事」（ここでは同じカテゴリーを８記事）を取得し
それを「①記事ごとの出力用HTML」でご紹介した処理を用いてループで出力しています

function create_related_post_list() {
  $html  = '';
  $html .= '関連記事';
  $html .= '';

  // 関連記事の呼び出し
  $args = array(
    'post_type'       => 'post',                      // 「投稿」の記事を取得
    'category_name'   => get_the_category()[0]->slug, // 表示中の記事のカテゴリーを指定
    "post__not_in"    => [get_the_ID()],              // 表示中の記事は「関連記事」に含めない
    'posts_per_page'  => 8,                           // 8件の記事を取得する（※調整可能）
  );
  $the_query = new WP_Query( $args );

  // ここからループを回している
  if ( $the_query->have_posts() ) :  
    while ( $the_query->have_posts() ) : $the_query->the_post();

      // 関連記事をひとつずつ取得
      $html .= create_related_post();
    
    endwhile;
  endif;
  wp_reset_postdata();
  // ループ処理ここまで

  $html .= '';

  echo $html;
}
add_shortcode('my_short_create_related_post_list', 'create_related_post_list');

ここで登場しているHTML構造もSWELLのデフォルトの「関連記事」を引用したものとなっています。

ケケンタ

最終行のadd_shortcodeで上記の処理をショートコード名「my_short_create_related_post_list」として登録をしています。

以上で任意の場所に「関連記事」を出力するショートコードの用意ができました。

あとはこれを好きな場所（例えばウィジェットの「記事下部」）に貼り付ければ、「関連記事」が出力されます。

使用例

（例）記事下部に「関連記事」を出力するショートコードを設定

もしデフォルトの関連記事を使用している場合は表示が重複することになるため適宜非表示にしましょう。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

「テーマファイルエディタ」の場所

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

functions.phpの場所

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

functions.phpの編集内容

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

ケケンタ

以上がSWELLで「関連記事」を任意の場所に出力する方法でした！

SWELLのデフォルト機能では関連記事は元々決められた場所にしか出力することができません。

しかし、今回ご紹介した方法を使用すれば自分が好きな場所にショートコードを設置＝「関連記事」を出力することが可能です。

オリジナリティを出したり回遊率を高めるために上手く活用していただければ何よりです！

このブログでは、他にもWordPressやWeb制作、PHPについて様々な情報を発信していますので、色々見ていただけると嬉しいです。

ケケンタ

それでは最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【SWELL】「目次広告」の内容をカテゴリーごとに変更する方法

ケケンタ — Tue, 11 Jun 2024 06:08:14 +0000

この記事では

SWELLで「目次広告」の内容を
カテゴリーごとに変更する方法

をご紹介します。

SWELLの「目次広告」を使用すると簡単に目次の前後に任意の広告を表示できて便利なのですが、

ケケンタ

このカテゴリーでは別の広告を表示したいんだよな……

ということがあります。

今回ご紹介するのはそのようなお悩みを解決できる方法です。

この記事でわかること

SWELLの目次広告をカテゴリーごとに変更する方法
親カテゴリーを基準に目次広告を変更する方法
祖先カテゴリーを基準に目次広告を変更する方法

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

あわせて読みたい

【作業の流れ】カテゴリーごとに目次広告を変更する方法

実は「目次広告」を設定する項目欄ではHTMLタグを使用することが可能です。

ケケンタ

そちらを踏まえた上で、まずは簡単に今回使用する方法の作業の流れをご説明します。

カテゴリーごとに目次広告を変更する作業の流れ

使用したい広告を「広告タグ」もしくは「ブログパーツ」に登録しておく
「SWELL設定」→「広告コード」→「目次広告」に使用したい広告のショートコードをすべて入力する
②で入力したショートコードそれぞれを、任意のCSSクラス名を付けたdiv要素で囲う
「カスタマイズ」→「追加CSS」に③で設定した各div要素を非表示にするCSSを記述する
functinos.phpにカテゴリー別制御用の処理を記述する

ケケンタ

手順が少々複雑になる箇所もありますが、以降より画像も使用してできるだけ丁寧に解説していきます！

① 使用したい広告を「広告タグ」もしくは「ブログパーツ」に登録しておく

まずは使用したい広告（コンテンツ）を「広告タグ」もしくは「ブログパーツ」に登録します。

以下はブログパーツ登録後の画面

コンテンツを登録した後のブログパーツ一覧画面（一部抜粋）

ケケンタ

画像の右側に写っている

の部分がショートコードです。

② 「目次広告」に使用したい広告のショートコードをすべて入力する

手順③を完了するまでの間はすべての「目次広告」が表示されてしまうため、この手順②を行う前に手順③の作業内容もご確認いただくことを推奨します。

①で用意したショートコードを

「SWELL設定」→「広告コード」→「目次広告」

にすべて入力します。

目次広告にショートコードを設定

③ ②で入力したショートコードを任意のCSSクラス名を付けたdiv要素で囲う

この作業が「目次広告をカテゴリーごとに制御する」上で最も重要です。

②で入力したショートコードを任意のCSSクラス名を付与したdiv要素で囲います。

例えば、以下の画像では次のような形でクラス名を付与しています。

デフォルトで全体に表示したい目次広告……display-general-cat
特定のカテゴリー（例では「WordPress」カテゴリー）で表示したい目次広告……display-only-wp-cat

目次広告に設定したショートコードをdiv要素で囲う

ケケンタ

１行目には特定のカテゴリーに依存せず表示したい目次広告のショートコード
２行目には「WordPress」カテゴリーにだけ表示したい目次広告のショートコードを入力した状態です。

④ 「追加CSS」に③で設定した各div要素を非表示にするCSSを記述する

次に、③でショートコードに設定した各div要素を非表示にするためのCSSを

「外観」→「カスタマイズ」→「追加CSS」

に記述していきます。

すべてのdiv要素を非表示にするのではなく、特定のカテゴリーでだけ表示したい目次広告のdiv要素だけを非表示にします。

「カスタマイズ」の位置

「追加CSS」の位置

ケケンタ

「追加CSS」を開いたら以下のように、「特定のカテゴリーでだけ表示したい目次広告」に設定したCSSクラス名に対してCSSを記述します。

（例）「WordPress」カテゴリーでだけ表示したい目次広告の
CSSクラス（display-only-wp-cat）にCSSを記述

「追加CSS」への記述内容

.display-only-wp-cat {
  display: none;
}

対象のショートコードが複数ある場合は以下のように行を追加
※最後の行以外は「,」で区切ってあることに注意

.display-only-wp-cat,
.display-only-sample01-cat,
.display-only-sample02-cat {
  display: none;
}

ここまでの作業で、いったんすべての目次に「デフォルトで全体に表示したい目次広告」だけが表示されている状態になりました。

ケケンタ

このあとご紹介するソースコードをfunctions.phpに追加することで、カテゴリーごとに表示する目次広告を変更することが可能です。

⑤ functinos.phpにカテゴリー別制御用の処理を記述する

functions.phpを編集する際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

functions.phpの最後に以下のソースコードを追加します。

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「サンプル」を判定
     */ 
	if( $cat->slug == 'sample' ){
		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample-cat {
			display: block !important;
		}
		

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライトされている11行目と19行目の「sample」、「.display-only-sample-cat」がご自身の設定内容に合わせて変更していただく箇所です。

例えば以下のような内容で設定をしていた場合には、次のようなソースコードになります。

「WordPress」カテゴリーでのみ表示したい
「WordPress」カテゴリーでのみ表示した目次広告のショートコードのCSSクラス名は「display-only-wp-cat」に設定してある。

（例）「WordPress」カテゴリーでのみ表示したい目次広告を有効にする

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「WordPress」を判定
     */ 
	if( $cat->slug == 'wordpress' ){
		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ケケンタ

以上でカテゴリーごとに表示する目次広告を変更することが可能です！

複数のカテゴリーを制御したい場合のソースコード

ここまでのご説明では「WordPress」カテゴリーひとつに限った内容になっていましたが、実際には複数のカテゴリーで目次広告を出しわけたいという方も多いかと思います。

その場合はelse if文を使用してソースコードを記述します。

複数のカテゴリーを制御したい場合のソースコード

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「サンプル０１」を判定
     */ 
	if( $cat->slug == 'sample01' ){
		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample01-cat {
			display: block !important;
		}
		

		EOM;
		echo $headinputtag;
	
    /**
     * カテゴリー「サンプル０２」を判定
     */ 
	} else if( $cat->slug == 'sample02' ) {

		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample02-cat {
			display: block !important;
		}
		

		EOM;
		echo $headinputtag;
    /**
     * カテゴリー「サンプル０３」を判定
     */ 
	} else if( $cat->slug == 'sample03' ) {
               
                 ～　省略　～
    }
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

「親カテゴリー」を基準に目次広告を出しわけたい場合

人によってはカテゴリーに階層を設定しており、「子カテゴリーではなく親カテゴリー」で目次広告を出しわけしたいという場合も多いのではないかと思います。

その場合は以下のソースコードをお使いください。

親カテゴリーで目次広告を出しわけたい場合

/**
 * 親カテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {

	/**
	 * 現在のカテゴリー情報を取得
	 */
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
	 * 親カテゴリーがあれば親カテゴリーを取得する
	 */
	if( $cat->parent ){ //親カテゴリの場合
		$parent = get_category( $cat->parent );
		$cat_slug = $parent->slug;
	} else { //子カテゴリの場合
		$cat_slug =  $cat->slug;
	}

	/**
     * カテゴリー「WordPress」を判定
     */ 
	if( $cat_slug == 'wordpress' ){
		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライト行（12～20行目）が増え、ここで親カテゴリーかどうかの判定を行っています。

「祖先カテゴリー」を基準に目次広告を出しわけたい場合

もしかしたらカテゴリー階層を３階層にしている方もいらっしゃるかもしれません。

そのようなとき、親カテゴリーではなく「祖先カテゴリー」で目次広告を出しわけしたいという方は以下のソースコードをお使いください。

祖先カテゴリーで目次広告を出しわけたい場合

/**
 * 祖先カテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {

  /**
   * 現在のカテゴリーを取得
   */
  $cats = get_the_category(); 
  $cat = $cats[0];

  /**
   * 祖先カテゴリーがあれば祖先カテゴリーを取得する
   */
  if( !$cat->parent ){ //現在のページが最上位のカテゴリーなら
    $cat_slug = $cat->slug; // 現在のカテゴリーのスラッグ
  } else { //祖先カテゴリーを表示するなら
    $ancestor = array_pop(get_ancestors( $cat->cat_ID, 'category' )); //一番上のカテゴリーIDを取得
    $cat_slug = get_category($ancestor)->slug; // 祖先カテゴリーのスラッグ
  }

  // カテゴリー「sosen」を判定
  if( $cat_slug == 'sosen' ){
    $headinputtag = <<
    .display-general-cat {
      display: none !important;
    }

    .display-only-wp-cat {
      display: block !important;
    }
    

    EOM;
    echo $headinputtag;
  }
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライト行（12～20行目）が増え、ここで親カテゴリーかどうかの判定を行っています。

まとめ

ケケンタ

以上が目次広告をカテゴリー別に出しわける方法でした！

いかがだったでしょうか。

SWELLの目次広告は非常に便利なのですが、カテゴリー別に目次広告を出しわけるためにはひと手間必要になります。

今回ご紹介した方法で各カテゴリーに適した目次広告を表示すれば、お財布の中身もうるおう……かもしれません。

ケケンタ

この記事が少しでもお役に立ったなら何よりです！

この記事ではWordPressやWeb制作に関する情報を発信していますので、ご興味のある方は他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【SWELL】特定のページで目次広告を非表示にする方法

ケケンタ — Mon, 10 Jun 2024 07:22:20 +0000

SWELLの目次広告、便利なのですが収益化メインのページでは表示したくないなあというのが正直なところです。

ケケンタ

特定のページでは目次広告を非表示にする方法って無いのかな……

と色々調べていたところ、その方法を見つけることができたため、今回はそちらをご紹介します。

この記事を読むと分かること

SWELLの目次広告を特定のページで非表示にする方法

この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

【WordPress】カスタム投稿タイプの特定ページを判定する方法

あわせて読みたい

目次広告を特定のページで非表示にするソースコード

ケケンタ

早速ですが、以下がベースとなるソースコードです。
ご状況に合わせて、以下のソースコードの一部を修正してご利用いただく形になります。

ベースとなるソースコード

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( ページ判定の条件分岐 ) {
        return false; // 目次広告を非表示
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

ハイライト行（２行目）の「ページ判定の条件分岐」の部分にはご状況に応じた条件をご入力下さい。

以下より利用頻度が高そうな条件の具体例をご紹介します。
ご自身の状況に合わせて、適当なソースコードをfunctions.phpの最後に追加して下さい。

※SWELLで子テーマのfunctoins.phpにソースコードを追加する手順はこちら

特定の「投稿ページ」で目次広告を非表示にする

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_single('投稿ページのスラッグ') ) { // 投稿ページ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_single('sample_slug') ) { // 投稿ページ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

特定の「個別ページ」で目次広告を非表示にする

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_page('固定ページのスラッグ') ) { // 固定ページ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_page('sample_slug') ) { // 固定ページ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

特定の「カスタム投稿ページ」で目次広告を非表示にする

ケケンタ

カスタム投稿ページだけ少し条件の指定までの流れが異なります。

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    // カスタム投稿タイプのスラッグを取得
    global $post;
    $slug = $post->post_name;

    if ( $slug === 'カスタム投稿タイプのスラッグ' ) { // カスタム投稿タイプ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    // カスタム投稿タイプのスラッグを取得
    global $post;
    $slug = $post->post_name;

    if ( $slug === 'sample_slug' ) { // カスタム投稿タイプ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

「テーマファイルエディタ」の場所

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

functions.phpの場所

続いて、エディタの末尾にソースコードを追加します。

functions.phpの編集内容

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

目次広告は適切なページにだけ表示しよう

ケケンタ

以上が目次広告を特定のページで非表示にする方法でした！

目次広告は一度設定すればすべてのページに自動反映されて便利なのですが、収益化ページではかえって邪魔になってしまうケースもあります。

そのようなときに今回ご紹介した方法がお役に立てば幸いです。

それでは、最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介

PageSpeedのスマホスコアを約50点アップするためにしたこと

ケケンタ — Sun, 09 Jun 2024 06:18:09 +0000

ケケンタ

SWELLにしたらPageSpeed Insightsのスコアがめっちゃ伸びた！（98点‼）

そう喜んだ直後、スマホの方のスコアが36点になっていることに気が付きました。

この時点ではスコアの合格ラインははっきり分かっていませんでしたが、このスコアが低すぎるのは一目瞭然だったため、改善すべくあれこれ奮闘しました。

その結果「スマホスコア：最高91点（10点ぐらい振れ幅があります）」に到達することができたため、今回はそこに至るまでの過程で取り組んだ内容を記事にまとめたいと思います。

この記事で分かること

PageSpeed Insightsとは何か？
PageSpeed Insightsでスマホのスコアを上げるためにしたこと（※一部作業はSWELLでのみ対応）

ケケンタ

この記事でご紹介する方法でスマホスコアが40～50点近くもアップしました。
SWELL以外のテーマをお使いの方でも実践できる内容を多く含んでいるためぜひご参考にしていただけると嬉しいです。

最新のスコア（78～91点ぐらいの幅があります）

PageSpeed Insightsのスコア結果

【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説

あわせて読みたい

PageSpeed Insightsとは？

PageSpeed Insightsとは？

PageSpeed Insightsとは、簡単に言うとそのサイトの「表示速度」、「SEO対策」、「ファイルの読み込み状況」などを評価し、スコア化してくれるGoogle公式のサイト評価サービスです。

今回言っている「スコア」は「パフォーマンス」の部分のことを指しており、

いわゆる合格点については各サイトによって記述されている内容が異なりますが、おおよそ以下のような点数が目安になるようです。

スマホ……50～70点以上
パソコン……80～90点以上

この目安によると、（……よらなかったとしても）僕の「スマホ：36点」があまりに低い評価だったことは間違いありません。

しかもGoogleによるとパソコンのスコアよりもスマホのスコアの方がSEO的に重要とのことです（モバイルファーストの考え）

ケケンタ

この事実を知ってからは出来る限り早くPageSpeed Insightsのスコアを上げなきゃ、と必死になりました……。

ただし注意点として、スコアはあくまで目安です。必ずしも高ければ高いほど良いというものではなく、サイトを訪れるユーザーの利便性を考慮することを第一とした上で最適化を行っていきましょう。

以下が僕がスコアアップのために行ったことの一覧です。

PageSpeed Insightsのスコアアップのために行ったこと

使用していないJavaScriptの削減
特定CSSの遅延読み込み
自作ファイルを必要なページでのみ読み込ませる
全アイキャッチ画像を一度tinypngで圧縮してからアップロードし直し

ケケンタ

ひとつずつ順番にご紹介していきます！

【その１】使用していないJavaScriptの削減

PageSpeed Insightsでは「使用していないJavaScriptの削減」という項目があり、その中には以下にご紹介する２パターンのファイルたちが含まれていました。
この章ではそのファイルたちを最適化したときの内容をご説明します。

Google reCAPTCHA関係のjsファイル

Google reCAPTCHAのjsファイルは不要なページ（お問い合わせページ以外すべて）でも読み込まれているらしく、しかもファイル容量が大きいため最優先で以下のソースコードをfunctions.phpに追加して最適化しました。

ケケンタ

これだけで点数が20～30点ほど上がりました……！
めちゃくちゃおすすめです。

functions.phpに追加したソースコード

/**
 * お問い合わせページでのみrecaptchaのjsファイルを読み込む
 */
function only_contact_load_files() {
    if ( ! is_page( 'contact' ) ) {
        wp_deregister_script( 'google-recaptcha' );
        wp_deregister_script( 'wpcf7-recaptcha'  );
    }
}
add_action( 'wp_enqueue_scripts', 'only_contact_load_files', 100 );

□ 参考にさせていただいたサイト：https://nowaki.work/recaptcha-2

GA4関係のjsファイル【※SWELL機能を利用した作業】

PageSpeedの「使用していないJavaScriptの削減」項目にjsファイルのフルパスが表示されています。

そのパスをコピーし

「SWELL設定」→「遅延読み込み機能」→「スクリプトの遅延読み込み」に以下の５項目を追加しました。

adsbygoogle.js?client=ca-pub-000000000000000000,
adsbygoogle.js,
https://www.googletagmanager.com/gtag/js?id=G-○○○○○○○○,
googletagmanager.com/gtag/js,
gtag(,

SWELL設定画面で遅延読み込みさせるjsファイルを列挙

Highlighing Code Block関係のjsは遅延読み込みさせると「行番号」や「コピー機能」が正常に動作しなくなったため、以下のjsファイルは上記リストから取り除いています。

hcb_script.js

【その２】特定CSSの遅延読み込み

【その１】と似たようなもので「使用していないCSSの削減」という項目がありました。

ケケンタ

僕のケースでは以下の１つのファイルが対象だったのですが、多くの記事で必要なCSSだったため、該当ページから除外するのではなく、遅延読み込みさせる方向で最適化をしました。

atom-one-dark-reasonable.min.css

こちらは僕の個人的なカスタマイズが関係しているCSSファイルのため、もしかしたら該当する方は少ないかもしれません。

プラグイン「Highlighing Code Block」をCDNで利用する際に使用している「atom-one-dark-reasonable.min.css」です。

どうやらこのCSSファイルがページのレンダリングを遅らせているようだったので、遅延読み込みすることにしました。

functions.phpに追加したソースコード

/**
 * 特定のCSSを非同期読み込みにする
 */
function my_preload_css($tag){
	$match = preg_match("/atom-one-dark-reasonable.min.css/", $tag); //非同期にするファイル名を記述
	if ($match) {
		$tag = preg_replace( '/stylesheet/' , 'preload', $tag );
		$tag = preg_replace( '/ />/' , ' as="style" onload="this.onload=null;this.rel='."'stylesheet'".'" />', $tag );
	}
    return $tag;
}
add_filter('style_loader_tag', 'my_preload_css');

CSSファイルの読み込みについては、以下の記事を参考にさせていただきました。本来であればこちらの記事のような方法が理想的のようです。
しかし、自分で追加したCSSの関係で表示崩れが解消できなかったため、今回は上記のソースコードに置き換えさせていただきました。

□ 参考にさせていただいたサイト：https://blogger-no-mori.com/eliminate-render-blocking-javascript-css

【その３】自作ファイルは必要なページでのみ読み込ませる

その他の個別対応として、自作ファイル（CSS）は実際に使用しているページでのみ読み込まれるようにきちんと条件分岐で制御しました。

functions.phpに追加したソースコード

/**
 * PHP学習サービスでのみ読み込む
 */
function ctrl_link_files() {
    // カテゴリーID
    global $post;
    $cat_num = $post->post_category[0];
    if( $cat_num == 51 ) {
        wp_enqueue_style( 'php-study-service', get_stylesheet_directory_uri() . '/css/php-study-service.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'ctrl_link_files', 100 );

【その４】全アイキャッチ画像を一度tinypngで圧縮してからアップロードし直し

tinypngは画像を無料で圧縮できるWebサービスです。

僕は画像圧縮対策としてプラグイン「EWWW Image Optimizer」を導入しています。

しかし、こちらによる圧縮だけでは不十分と感じ、いったんすべてのアイキャッチ画像をtinypngで圧縮してから再アップロードするという作業を行いました。

ケケンタ

この作業はとても大変でしたが、スコアが５～１０点ぐらい上がったため効果としては「ほどほど」という感じでした。

スコアを再確認するときの注意点

個人的にスコアを再確認するときに「これは注意した方がいいな」と思ったことがあるため、簡単にご紹介します。

スコアを再確認するときの注意点

キャッシュ系プラグインを使用しているなら一度「すべてのキャッシュを削除する」と実行してからPageSpeedで測定を行う
前章までの対策を行った直後の1回目の測定は、まだ最新の状態が反映されていないことがあるため、念のため2回測定を行う

ケケンタ

僕の場合、1回目の再測定では点数が変わらなかったのに、念のため2回目の測定を行ったところ正常に最新状態が反映されて、点数が30点ほど上がりました。
（キャッシュなどの関係で、反映にラグなどがありそうな様子でした）

まとめ

ケケンタ

以上の方法でスコアが40～50点近くも上がりました！

初めてPageSpeed Insightsでスコア計測をしたのがSWELLに変えたばかりの頃だったのですが、そのときにスマホの絶望的なスコアを見て非常に焦りを感じました。

しかし、SWELLではその他の対策がしっかり行われている分、上記のような対策を施すことで期待以上のスコア改善が見られました。

僕はGoogleアドセンスやGoogle reCAPTCHA、15個以上のプラグインを導入しており、その上でこのスコアを出せるのは非常にすごいことなのではないかと思います。

また、今回も多くのサイトの助けを得ながらどうにかこうにかスコア改善の具体的な方法を実践することができました。本当に感謝です。

ケケンタ

この記事でご紹介した方法でどなたかのスコアを救えたなら何よりです！

それでは最後までご覧いただきありがとうございました。

□ 今回参考にさせていただいた記事（再掲）
https://nowaki.work/recaptcha-2
https://blogger-no-mori.com/eliminate-render-blocking-javascript-css

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

ケケンタ — Fri, 07 Jun 2024 11:34:45 +0000

SWELLでは投稿ページのタイトルとアイキャッチ画像の並び順がデフォルトで決まっています。（タイトル→アイキャッチの順番）

しかし、SWELLはWordPressテーマ使用数No.1を誇っているだけあり、「デザインの差別化」を図りたいと考える方もいらっしゃるかと思います。

今回はそのような方に向けて

SWELLでタイトルとアイキャッチ画像の表示を
上下逆にする方法

をご紹介します。

今回ご紹介する表示のイメージ

ケケンタ

functions.phpにソースコードを追加するだけで誰でも簡単にできるので、ご興味のある方はぜひお試しください！

上述の通り、この記事でご紹介する方法ではfunctions.phpを編集します。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

【SWELL】「目次広告」の内容をカテゴリーごとに変更する方法

あわせて読みたい

【ソースコード】タイトルとアイキャッチ画像の表示を上下逆にする

以下の２つのソースコードをfunctions.phpの最後に追加します。

タイトルの上にアイキャッチ画像を表示するための処理

/**
 * タイトルの上にアイキャッチ画像を表示する処理
 */
function my_eyecatch_on_title() {		
	// アイキャッチ画像のURL
	$thumb_url = get_the_post_thumbnail_url(get_the_ID(), 'full');

	// アイキャッチ画像が存在するなら出力
	if ($thumb_url) {
		echo '';
	}
}
add_action('swell_before_post_head', 'my_eyecatch_on_title');

元々タイトルの下に表示されていたアイキャッチ画像を非表示にする処理

/**
 * 元々のアイキャッチ画像は非表示にする
 * ※これを行わないとアイキャッチ画像がダブって表示されてしまう
 */
function my_remove_swell_thumbnail($return) {
	return '';
}
add_filter('swell_parts_post_thumbnail', 'my_remove_swell_thumbnail');

ケケンタ

以上のソースコードをfunctions.phpの最後に追加することでタイトルとアイキャッチ画像の表示順序を上下逆にすることが可能です。

子テーマのfunctoins.phpにソースコードを追加する手順はこちら
※このページ内で移動します。

タイトルの上に表示したアイキャッチ画像の下の余白を調整する

ただし、素の状態だとアイキャッチ画像とタイトルの間の余白が狭いため、CSSで少し調整します。

以下のソースコードを「外観」→「カスタマイズ」→「追加CSS」の最後に追加します。

.my-eyecatch {
    margin-bottom: 2em !important;
}

.my-eyecatchは前章でご紹介した「アイキャッチを表示する処理のimgタグに与えているCSSクラス」です。
これにCSSプロパティを当てることでアイキャッチ画像とタイトルの間の余白を調整しています。

「追加CSS」に追加する

「追加CSS」の場所

「追加CSS」に追加した様子

CSS追加したら右上の「公開」ボタンを忘れずにクリックしましょう。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

テーマファイルエディタの場所

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

functions.phpの場所

続いて、エディタの末尾にソースコードを追加します。

functions.phpの編集内容

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

以上が「SWELLでタイトルとアイキャッチ画像の表示を上下逆にする方法」でした。

SWELLは利用者数が多い分、デザイン面で他の方と被りが発生しがちという側面も持ち合わせています。

（それでもカスタマイズ性が非常に高いためオリジナリティを出すことは十分可能です）

今回の方法を用いることで、各投稿記事のデザインで差別化が図れます。

ケケンタ

有料テーマのSWELLはカスタマイズ性が非常に高く、操作も簡単です！

それだけに、こうしたソースコードを利用したカスタマイズが他の方との違いを生み出しやすくなります。

このブログではWordPressやPHP、Web制作に関するお役立ち情報を発信していますので、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

【SWELL】記事タイトルの上に広告を表示する方法

ケケンタ — Wed, 05 Jun 2024 22:40:31 +0000

以前にこちらの記事で「SWELLでアイキャッチ画像の上に広告を表示する方法」をご紹介しました。

あわせて読みたい

【SWELL】アイキャッチ画像の上に広告を表示する方法ときどきアイキャッチの上に広告を表示させているブログがあるけど、あれってSWELLではどうやるんだろう……？今回はこのようなお悩みをお持ちの方に SWELLでアイキャッ…

この記事では、アイキャッチ画像の上ではなく

SWELLで記事タイトルの上に広告を表示する方法

をご紹介します。

ケケンタ

今回の方法もとても簡単にできるので、ご興味のある方はぜひお試しください！

【SWELL】「目次広告」の内容をカテゴリーごとに変更する方法