かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 no…

かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 noteではWordPressのカスタマイズを紹介しています。XでもWeb制作者のリアルな情報発信をしております。ぜひフォローよろしくお願いします。 https://webrent.xsrv.jp/
すべてのマガジンを表示
  • 固定された記事

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

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

10,000
かんた🌊SWELLマニア

    • 【GOLD BLOG】ヘッダー右上に電話番号＋問い合わせボタンを表示するカスタマイズ

      WordPressテーマGOLD BLOGを使い、コーポレートのデモサイトを作成してみました。 →デモサイトを開く ヘッダーに電話番号と営業時間、問い合わせ系のボタンリンクを設置する独自カスタマイズをしてみました。 ファーストビューに電話番号や問い合わせボタンを設置することで、サイト訪問者がスムーズに問い合わせができるコーポレート系定番のレイアウト構成です。 本記事ではGOLD BLOGのヘッダー右上に、問い合わせ関連の情報を表示させるカスタマイズ方法をシェアします。

      9,890
      かんた🌊SWELLマニア

      • 【GOLD BLOG】背景に固定動画を設定する方法

        最近リリースされたWordPressテーマ「GOLD BLOG」のカスタマイズメモです。 GOLD BLOGは絞り込み検索機能が付いている珍しいテーマ。 色々調べながらデモサイトを作りつつ勉強しています。 最近制作したデモサイトで背景に固定動画を設置するカスタマイズをしてみました↓ →デモサイトを開く サンプルサイトの構成 よりシンプルな構成にしたサンプルサイトを用意しました。GOLD BLOGを有効化した時点からのカスタマイズ方法をシェアします。 →サンプルサイト

        6,980
        かんた🌊SWELLマニア

        • 【WordPress】埋め込み動画から「ダウンロード」を無くすカスタマイズ

          SWELLマニアのかんた（@swell_mania）です。 今回は、特定のテーマではなくWordPressコアブロックの１つ「動画ブロック」のカスタマイズについての記事になります。 動画ブロックで埋め込んだ動画は、標準の仕様だと「ダウンロード」というオプションが表示されます↓ このボタンだけでなく、動画上で右クリックを押しても、ダウンロードできてしまう仕様です↓ 名前の通りなんですがダウンロードをクリックすると、ユーザーが動画を自身の環境に保存できる仕組みになっていま

          かんた🌊SWELLマニア
        • 固定された記事

        【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを…

        かんた🌊SWELLマニア

        マガジン

        • GOLD BLOG
          2本
        • SWELL
          73本
        • JIN
          13本
        • Cocoon
          4本
        • Arkhe
          9本
        • Lightning
          4本

        記事

          【SWELL】カスタム投稿のアーカイブページにブログパーツを設置しエディターで編集可能にする

          SWELLのカスタム投稿のアーカイブページのタイトル下に、ブログパーツを設置した作業メモです。 下記の画像の「対象スペース」部分です↓ →サンプルサイトを開く アーカイブページにブログパーツを配置することで、クライアントが自由に編集できるようにするのが目的です。 SWELLのカテゴリーのアーカイブにはブログパーツを設置できる機能があるんですが、カスタム投稿でもそれっぽいカスタマイズができないか調べた結果、テンプレートを編集しないでも実装できることが分かりました。 サ

          5,980
          かんた🌊SWELLマニア

          【SWELL】カスタム投稿のアーカイブページにブログパーツ…

          かんた🌊SWELLマニア

          【SWELL】VK Filter Searchのフォームをモーダルで開くカスタマイズ

          SWELLマニアのかんた（@swell_mania）です。 SWELLとVK Filter Search Proを使ったカスタマイズの備忘録です。 VK Filter Search Proの絞り込み項目が多いと、当然ながらページが縦長になります。 デザインをスッキリさせたいと思い、絞り込み検索フォームをモーダルに格納しました。以下、サンプルサイトです↓ →サンプルサイトを開く トリガーとなるボタンをクリックすると、モーダルが表示される仕組みです。 開いたモーダルの「

          10,000
          かんた🌊SWELLマニア

          【SWELL】VK Filter Searchのフォームをモーダルで開くカ…

          かんた🌊SWELLマニア

          【SWELL】2カラム化 | 左側に固定サイドバーを設置するカスタマイズ方法

          ※2024年4月7日更新しました。 WordPressテーマSWELLで「2カラムデザインにしつつ、左側に固定メニュー」を表示するカスタマイズを実装してみました。 →「和風なサイト」を開く ブレイクポイントは1,100px。 PCなどで閲覧時には、上記画像の通り左側に固定メニューが表示される仕様です。 サンプルサイト 解説用にシンプルなサンプルサイトを用意しました↓ →サンプルサイトを開く サンプルサイトの構成 【バージョン】 WordPress：6.5.2

          6,980
          かんた🌊SWELLマニア

          【SWELL】2カラム化 | 左側に固定サイドバーを設置するカ…

          かんた🌊SWELLマニア

          【SWELL】リッチカラムを固定化しオシャレなパーツを作る方法

          SWELLマニアのかんた（@swell_mania）です。 WordPressテーマ「SWELL」のリッチカラムブロックを使ったオシャレなカスタマイズを紹介します↓ ２つカラム項目を並べて、片側を固定化するとアッという間にオシャレなパーツができてしまいます！ 今回はこのオシャレかつ実用的なデザインの作り方をシェアします。 難易度は個人的にかなり低めだと思いますので、ぜひチャレンジしてみてください。 サンプルサイトの構成 【バージョン】 WordPress：6.4

          6,980
          かんた🌊SWELLマニア

          【SWELL】リッチカラムを固定化しオシャレなパーツを作る…

          かんた🌊SWELLマニア

          解決アプローチと注意事項について

          SWELLマニアのかんた（@swell_mania）です。 僕が紹介する有料記事部分内では、カスタマイズ方法だけでなく、ちょっとしたアレンジ方法やカスタマイズが上手く行かない場合の解決アプローチを記事の後半で紹介しています。 トラブルシューティングはおよそ共通なアプローチがあるので本記事にまとめておきます。 ちなみに記事内で紹介しているカスタマイズは、テスト環境上で動作確認した後、本番環境に実装するのがおすすめです。 基本的に、記事執筆時に利用可能な最新バージョンのW

          かんた🌊SWELLマニア

          解決アプローチと注意事項について

          かんた🌊SWELLマニア

          【SWELL】半透明な固定サイドバーを表示するカスタマイズ

          2023年12月4日更新 WordPressテーマSWELLで半透明な固定のサイドバーを配置してみました。SNSアイコンやナビゲーションになるアイコンを並べると、SWELLじゃないみたいに変化しました！ →このサイトを開く 本記事では半透明でオシャレな固定サイドバーの作り方を紹介します。 ちなみに対象のサイドバーは下記画像内、右側にある赤線内エリアのことでです↓ サンプルサイト カスタマイズ解説用のサンプルサイトを用意しました↓ →サンプルサイトを開く トップペー

          7,980
          かんた🌊SWELLマニア

          【SWELL】半透明な固定サイドバーを表示するカスタマイズ

          かんた🌊SWELLマニア

          【SWELL】LPのURL「LP」を別のディレクトリー名に変更するカスタマイズ方法

          WordPressテーマSWELLのカスタマイズ作業メモです。 SWELLにはLP（ランディングぺージ）を作成する専用のカスタム投稿機能が標準搭載されています。 標準の投稿や固定ページとは完全に分離しているので、LPが管理しやすいし仕組みです。 LP投稿で作成するURLは特に指定を変更しない限り次の通りです。 ドメイン名/lp/lp_01 ドメイン名/lp/lp_02 ドメイン名とページ名の間に「/lp/」というディレクトリー名が付きます。 本記事ではこのlp部

          6,980
          かんた🌊SWELLマニア

          【SWELL】LPのURL「LP」を別のディレクトリー名に変更する…

          かんた🌊SWELLマニア

          【JIN:R】グロナビをメインビジュアルヘッダー画像の下に配置する方法

          WordPressテーマJIN:Rで、グロナビをメインビジュアルの「ヘッダー画像の下」に設置するカスタマイズをした作業メモです。 カスタマイザー上にはメインビジュアルの下にグロナビを配置するオプションはありませんので、コードレベルでのカスタマイズが必要です。 とはいえ、テンプレートファイルを編集してしまうとテーマのアップデートで面倒なことになってしまいます。 今回はPHPテンプレートを編集せずに、メインビジュアルのヘッダー画像の下にグロナビを移動した作業メモをシェアしま

          7,980
          かんた🌊SWELLマニア

          【JIN:R】グロナビをメインビジュアルヘッダー画像の下に…

          かんた🌊SWELLマニア

          【JIN:R】カテゴリーページにページネーションを設置する方法

          WordPressテーマJIN:Rのカテゴリーページのページネーションは「もっと見る」というボタンになっており、クリックすると投稿を読み込むというスタイルです。 WordPressのthe_posts_pagination()関数での出力ではなく、読み込んだ投稿にフィルターが効かないため不便だなと感じていました。 例えばpre_get_posts()関数を使い「記事を更新日ごとに並び替え」みたいなことはできません。 JIN:Rのカテゴリーページで「もっと見る」を廃止して

          6,980
          かんた🌊SWELLマニア

          【JIN:R】カテゴリーページにページネーションを設置する…

          かんた🌊SWELLマニア

          【SWELL】particles.jsで背景に固定アニメーションを設定する方法

          11月24日更新 最新バージョンのSWELL（2.8.1）に対応させました。 WordPressテーマSWELLの背景にparticles.jsでワチャワチャと動くアニメーションを実装した作業メモです。 →実物のサイトを開く →実物のサイトを開く サンプルサイト particles.jsをSWELLに実装したサンプルサイトです。 解説用により構成がシンプルなサンプルを作ってみました↓ →デモサイトを開く トップページだけでなく、ページごとに異なるアニメーション

          7,980
          かんた🌊SWELLマニア

          【SWELL】particles.jsで背景に固定アニメーションを設定…

          かんた🌊SWELLマニア

          【SWELL】検索結果の数を表示する方法|テンプレートのカスタマイズは不要

          WordPressテーマSWELLの検索結果ページに、検索条件にマッチした投稿の数を表示するカスタマイズメモです。 こんな感じです↓ テンプレートファイルを編集しないで検索結果数を表示する方法を考え付いたのでコードをシェアします。 ちなみに絞り込み検索プラグインのVK Filter Search Proにも対応しています↓ サンプルサイト 今回のカスタマイズを実装したサンプルサイトです↓ 検索結果タイトルの下には、本来なにも表示されません。今回のカスタマイズでは検

          4,980
          かんた🌊SWELLマニア

          【SWELL】検索結果の数を表示する方法|テンプレートのカス…

          かんた🌊SWELLマニア

          【Coccon】カテゴリーページに記事の表示順を並び替えるボタンを設置 | カスタムフィールド対応

          本記事は、WordPressテーマ「Cocoon」のカテゴリーページに投稿記事の並び替えボタンを付けた作業メモです。 最近Cocoonで絞り込み検索機能のあるサイトを作っていて、そういえば並び替え機能があったら便利だなーと思いカスタマイズしてみました。 商品の表示順を変えたりするのはECサイトなんかだと定番の機能なんですが、Cocoonに搭載されていない機能です。 記事の投稿日、更新日での並び替えの他、ACFプラグインなどで設定したカスタムフィールドの値で並び替えできる

          9,890
          かんた🌊SWELLマニア

          【Coccon】カテゴリーページに記事の表示順を並び替えるボ…

          かんた🌊SWELLマニア