かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 noteではWordPressのカスタマイズを紹介しています。問い合わせは拝読させていただきますが、返答はしておりませんのでご了承ください。 https://webrent.xsrv.jp/

かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 noteではWordPressのカスタマイズを紹介しています。問い合わせは拝読させていただきますが、返答はしておりませんのでご了承ください。 https://webrent.xsrv.jp/
すべてのマガジンを表示
  • 固定された記事

【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを追加表示するカスタマイズ方法

※2023年5月18日追記 SWELL最新バージョン（2.7.5.1）でも有効です。 WordPress有料テーマの「SWELL」のカスタマイズについてです。 企業サイトを作っていると、ヘッダーの右上部分に電話番号や営業時間を入れて欲しいといった要望を受けることがあります。 クライアントにヒアリングしてみると、以下の画像のような要望が多いなと感じます。 【企業サイト制作でよくある要望】 ・電話番号 ・営業時間 ・問い合わせフォーム SWELLの機能だけでこのレイアウ

10,000
かんた🌊SWELLマニア

    • 【SWELL】記事スライダーに「抜粋」を表示したカスタマイズメモ

      WordPressテーマSWELLのトップページには記事をスライダーを表示するオプションがあります。 記事スライダーに記事の抜粋を表示したいなと思い独自カスタマイズしてみました↓ サンプルサイト 今回のカスタマイズを実装したサンプルサイトです↓ →サンプルサイトを開く サンプルサイトの構成 【バージョン】 WordPress：6.2.1 SWELL：2.7.5.1 WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。プラグインは使いません

      5,490
      かんた🌊SWELLマニア

      • 【SWELL】記事スライダーにタグを表示するカスタマイズメモ

        WordPressテーマSWELLにはトップページに記事スライダーを表示させる機能があります。記事スライダーに表示される記事に、記事にひもづたタグを表示させてみました。 カスタマイザー上にはタグを表示させるオプションはありませんので、コードレベルでのカスタマイズが必要な作業です。 サンプルサイト 今回のカスタマイズを実装したサンプルサイトです↓ →サンプルサイトを開く カスタマイザーの公開日・更新日の表示オプションにチェックを入れても動作します↓ サンプルサイトの構

        5,490
        かんた🌊SWELLマニア

        • 【SWELL】お知らせバーを記事ページごとに変更するカスタマイズ

          WordPressテーマSWELLのカスタマイズ作業メモです。 今回はページ上部に表示される「お知らせバー」を、記事ごとに変更するというカスタマイズです↓ お知らせバーはカスタマイザーから設定可能なんですが、サイトを通じて１つのみを全ページ共通で表示するというのがSWELLの標準仕様です。 アフィリエイトブログなんかだと、記事ごとにお知らせバーの表示内容とリンク先のアドレスをASP指定のリンクに変更できれば便利だな～と思いました。 そんなわけで今回はこのお知らせバーの

          5,490
          かんた🌊SWELLマニア

        マガジン

        マガジンをすべて見る すべて見る
        • SWELL
          かんた🌊SWELLマニア
        • JIN
          かんた🌊SWELLマニア
        • Arkhe
          かんた🌊SWELLマニア
        • Lightning
          かんた🌊SWELLマニア
        • SANGO
          かんた🌊SWELLマニア
        • XWRITE
          かんた🌊SWELLマニア

        記事

        記事をすべて見る すべて見る

          【JIN:R】「抜粋」をカテゴリ等のアーカイブに表示するカスタマイズ

          WordPressテーマ「JIN:R」で記事の「抜粋」をカテゴリなどのアーカイブページに表示させる作業メモです。 サンプルサイト 抜粋を表示したサンプルサイトです。 →サンプルサイトを開く カテゴリーアーカイブ、タグアーカイブ、検索結果ページなどが対象です。記事リストブロックやRecommendとして表示される関連記事エリアは対象ではありません。記事一覧カードデザインは、サンプルサイトの通り縦長デザインを想定したカスタマイズです。 サンプルサイトの構成 【バージョ

          7,980
          かんた🌊SWELLマニア

          【JIN:R】カテゴリーなどのアーカイブにACFのカスタムフィールドを表示するカスタマイズ

          WordPressテーマ「JIN:R」の投稿一覧ページに、カスタムフィールドを表示させる機能を実装しました。 サンプルサイト 今回のカスタマイズを実装したサンプルサイトです。 →サンプルサイトを開く カテゴリーアーカイブ、タグアーカイブ、検索結果ページなどが対象です。記事リストブロックは対象ではありません。記事一覧カードデザインは、サンプルサイトの通り縦長デザインを想定したカスタマイズです。 カスタムフィールドはAdvanced Custom Fieldsプラグイン

          7,980
          かんた🌊SWELLマニア

          【SWELL】VK Filter Search Proを検索ページの固定フッターとして表示するカスタマイズ

          WordPressの絞り込み検索プラグイン「VK Filter Search Pro」を利用したカスタマイズの作業メモです。 ざっくり概要を説明すると、検索結果ページに固定フッターとして絞り込み検索フォームを表示するカスタマイズです。 まずはサンプルです↓ →サンプルを開く カスタマイズの説明を補足します。 VK Filter Search Proには検索結果ページに絞り込み検索フォームを表示するオプションがあります↓ このオプションを使うことで、条件にマッチする

          10,000
          かんた🌊SWELLマニア

          【SWELL】Bogo利用時にロゴ画像を言語ごとに切り替える方法法

          WordPress多言語プラグイン「Bogo」とWordPressテーマSWELLを有効化している環境でのカスタマイズ作業メモです。 SWELLには、カスタマイザーからヘッダーにロゴ画像を設定するオプションがあります↓ ロゴ画像は標準用に１個と、ヘッダー透過オプション有効時用に1個です。 Bogoプラグインを有効時に、ロゴ画像を言語ごとに別の画像に切り替えたい場合にはコードでのカスタマイズが必要になります。 サンプルサイト 言語ごとにロゴ画像を切り替えるカスタマイズ

          7,980
          かんた🌊SWELLマニア

          【SWELL】固定ページ毎に個別メインビジュアルを設定してみた

          WordPressテーマSWELLのカスタマイズ作業メモです。 サイト制作のお仕事で、SWELLの固定ページごとに異なるメインビジュアルを設定するといったカスタマイズをする機会がありました。 例えば、固定ページの「採用ページ」は画像Aをメインビジュアルとして設置。↓ 別の固定ページには、別の画像をメインビジュアルとして設置↓ サンプルサイト 今回のカスタマイズを実装したサンプルサイトです。 →サンプルサイトを開く トップページを含め、それぞれのページごとに別々の

          9,890
          かんた🌊SWELLマニア

          【SWELL】投稿リストブロックのタイトルの文字数を制限する方法

          SWELLのコミュニティーで見かけた次の質問についてです。 SWELLには投稿リストの文字数を指定するオプションはありません。コードレベルでのカスタマイズが必要になります。 普通に解決方法を考えても良かったのですが、最近流行しているChatGPTを使ってカスタマイズ方法を調べてみました。 先に結論を書くと、「意図したカスタマイズコードをChatGPT教えてもらえました」。 SWELLには「投稿リスト」と、「投稿リストブロック」という似た名称の機能があります。質問者の意

          かんた🌊SWELLマニア

          【JIN:R】新着記事に「New」マークを表示させるカスタマイズ

          突然ですが質問です! WordPressのカスタマイズにChatGPTを使ったことはありますか？ 正直怪しいツールだなーと思う人もいるでしょうが、ボクは無料の範囲内でかなり使っています。 何度か使ってみて感じたことですが、要件定義さえしっかりできれば便利なツール。業務をかなり時短できます。 ChatGPTを使いこなすポイントはずばり「質問力」です。やりたいことの詳細をしっかり伝えることで、一瞬で回答にたどり着きます。 どんな感じで使っているか知りたい人向けに、Cha

          かんた🌊SWELLマニア

          【SWELL】リッチカラムの「スクロールできます」のテキストをデバイスごとに変更するカスタマイズ

          WordPressテーマSWELLのリッチカラムブロックについてです。 リッチカラムには、「横スクロールで表示する」というオプションがあります↓ このオプションを有効化すると、リッチカラムに「スクロールできます→」と表示されます。 この「スクロールできます」のテキスト部分は管理画面からサクッと変更することはできません。 最近案件で、「アクセスしてきたデバイス（ユーザーエージェント）ごとに表示するテキストを変更する」というカスタマイズを担当しました。 例えばiPhon

          4,980
          かんた🌊SWELLマニア

          【SWELL】投稿リストブロックにページャー（もっと見るボタン）を設定するカスタマイズ方法

          WordPressテーマSWELLのカスタマイズ作業メモです。 固定ページに新着情報を表示させるときに便利な投稿リストブロックのカスタマイズです。投稿リストブロックは、指定の数だけ投稿を表示させることができますが、その他の記事へのページャー的な要素はありません。 新着記事として3件。 その下に「もっと見る」ボタンを設置し、「もっと見る」をクリックするとページ移動せずに、その他の記事を表示させるみたいなカスタマイズを作ってみました↓ →サンプルサイトを開く サンプルサ

          7,980
          かんた🌊SWELLマニア

          【SWELL】FAQブロックをH3見出しに変更するカスタマイズ

          WordPressテーマSWELLのカスタマイズ作業メモです。 今回はFAQブロック。FAQブロックは、サイト定番の「よくある質問」などのコンテンツを作るさいに便利なSWELLのカスタムブロックです。 SWELLのFAQブロックの「Ｑ」は、定義リストのdtでマークアップされています。 このマークアップをH3見出しタグに変更しました↓ FAQのマークアップをH3見出しタグに変更した目的は次の通りです。 SEO対策＋構造化データ 目次に追加表示 SEO対策＋構造化デ

          9,890
          かんた🌊SWELLマニア

          【SWELL】ステップブロックをH3見出しに変更するカスタマイズ

          WordPressテーマSWELLのカスタマイズ作業メモです。 SWELL独自のカスタムブロック「ステップブロック」をカスタマイズして、本来div.swell-block-step__titleで出力される部分を、h3の見出しタグに変更しました↓ サンプルサイト 今回のカスタマイズを実装したサンプルサイトです↓ →サンプルサイトを開く H3の見出し部分に部分は、目次にも反映されます↓ ステップブロックはデフォルト、ビッグ、スモールの３つのスタイルがあります。どれを

          9,890
          かんた🌊SWELLマニア

          【Arkhe】スライダーブロックのリッチスライダーにサムネイル画像を表示する

          WordPressテーマArkheのカスタマイズ作業メモです。 リッチスライダーに連動するサムネイル画像を表示してみました！ ブロックオプションで「垂直」を選択した場合↓ Arkheのスライダーブロックには「メディアスライダー」と「リッチスライダー」の２タイプあります↓ 今回のカスタマイズ対象はリッチスライダーです。 メディアスライダーはデフォルトでサムネイル画像が表示されます。リッチスライダーは、中身が画像とは限らないので当然ながらサムネイル画像が自動で表示される

          10,000
          かんた🌊SWELLマニア