マガジン
記事一覧
【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを追加表示するカスタマイズ方法
※2023年11月24日追記
SWELL最新バージョン（2.8.1）でも有効です。
WordPress有料テーマの「SWELL」のカスタマイズについてです。
企業サイトを作っていると、ヘッダーの右上部分に電話番号や営業時間を入れて欲しいといった要望を受けることがあります。
クライアントにヒアリングしてみると、以下の画像のような要望が多いなと感じます。
【企業サイト制作でよくある要望】
・電
【GOLD BLOG】ヘッダー右上に電話番号＋問い合わせボタンを表示するカスタマイズ
WordPressテーマGOLD BLOGを使い、コーポレートのデモサイトを作成してみました。
→デモサイトを開く
ヘッダーに電話番号と営業時間、問い合わせ系のボタンリンクを設置する独自カスタマイズをしてみました。
ファーストビューに電話番号や問い合わせボタンを設置することで、サイト訪問者がスムーズに問い合わせができるコーポレート系定番のレイアウト構成です。
本記事ではGOLD BLOGの
【GOLD BLOG】背景に固定動画を設定する方法
最近リリースされたWordPressテーマ「GOLD BLOG」のカスタマイズメモです。
GOLD BLOGは絞り込み検索機能が付いている珍しいテーマ。
色々調べながらデモサイトを作りつつ勉強しています。
最近制作したデモサイトで背景に固定動画を設置するカスタマイズをしてみました↓
→デモサイトを開く
サンプルサイトの構成
よりシンプルな構成にしたサンプルサイトを用意しました。GOLD B
【WordPress】埋め込み動画から「ダウンロード」を無くすカスタマイズ
SWELLマニアのかんた（@swell_mania）です。
今回は、特定のテーマではなくWordPressコアブロックの１つ「動画ブロック」のカスタマイズについての記事になります。
動画ブロックで埋め込んだ動画は、標準の仕様だと「ダウンロード」というオプションが表示されます↓
このボタンだけでなく、動画上で右クリックを押しても、ダウンロードできてしまう仕様です↓
名前の通りなんですがダウン
【SWELL】カスタム投稿のアーカイブページにブログパーツを設置しエディターで編集可能にする
SWELLのカスタム投稿のアーカイブページのタイトル下に、ブログパーツを設置した作業メモです。
下記の画像の「対象スペース」部分です↓
→サンプルサイトを開く
アーカイブページにブログパーツを配置することで、クライアントが自由に編集できるようにするのが目的です。
SWELLのカテゴリーのアーカイブにはブログパーツを設置できる機能があるんですが、カスタム投稿でもそれっぽいカスタマイズができな
【SWELL】2カラム化 | 左側に固定サイドバーを設置するカスタマイズ方法
※2024年4月7日更新しました。
WordPressテーマSWELLで「2カラムデザインにしつつ、左側に固定メニュー」を表示するカスタマイズを実装してみました。
→「和風なサイト」を開く
ブレイクポイントは1,100px。
PCなどで閲覧時には、上記画像の通り左側に固定メニューが表示される仕様です。
サンプルサイト
解説用にシンプルなサンプルサイトを用意しました↓
→サンプルサイトを開
【SWELL】リッチカラムを固定化しオシャレなパーツを作る方法
SWELLマニアのかんた（@swell_mania）です。
WordPressテーマ「SWELL」のリッチカラムブロックを使ったオシャレなカスタマイズを紹介します↓
２つカラム項目を並べて、片側を固定化するとアッという間にオシャレなパーツができてしまいます！
今回はこのオシャレかつ実用的なデザインの作り方をシェアします。
難易度は個人的にかなり低めだと思いますので、ぜひチャレンジしてみてく
解決アプローチと注意事項について
SWELLマニアのかんた（@swell_mania）です。
僕が紹介する有料記事部分内では、カスタマイズ方法だけでなく、ちょっとしたアレンジ方法やカスタマイズが上手く行かない場合の解決アプローチを記事の後半で紹介しています。
トラブルシューティングはおよそ共通なアプローチがあるので本記事にまとめておきます。
ちなみに記事内で紹介しているカスタマイズは、テスト環境上で動作確認した後、本番環境に
【SWELL】半透明な固定サイドバーを表示するカスタマイズ
2023年12月4日更新
WordPressテーマSWELLで半透明な固定のサイドバーを配置してみました。SNSアイコンやナビゲーションになるアイコンを並べると、SWELLじゃないみたいに変化しました！
→このサイトを開く
本記事では半透明でオシャレな固定サイドバーの作り方を紹介します。
ちなみに対象のサイドバーは下記画像内、右側にある赤線内エリアのことでです↓
サンプルサイト
カスタマイ
【SWELL】LPのURL「LP」を別のディレクトリー名に変更するカスタマイズ方法
WordPressテーマSWELLのカスタマイズ作業メモです。
SWELLにはLP（ランディングぺージ）を作成する専用のカスタム投稿機能が標準搭載されています。
標準の投稿や固定ページとは完全に分離しているので、LPが管理しやすいし仕組みです。
LP投稿で作成するURLは特に指定を変更しない限り次の通りです。
ドメイン名/lp/lp_01
ドメイン名/lp/lp_02
ドメイン名とペー
【JIN:R】グロナビをメインビジュアルヘッダー画像の下に配置する方法
WordPressテーマJIN:Rで、グロナビをメインビジュアルの「ヘッダー画像の下」に設置するカスタマイズをした作業メモです。
カスタマイザー上にはメインビジュアルの下にグロナビを配置するオプションはありませんので、コードレベルでのカスタマイズが必要です。
とはいえ、テンプレートファイルを編集してしまうとテーマのアップデートで面倒なことになってしまいます。
今回はPHPテンプレートを編集せ
【JIN:R】カテゴリーページにページネーションを設置する方法
WordPressテーマJIN:Rのカテゴリーページのページネーションは「もっと見る」というボタンになっており、クリックすると投稿を読み込むというスタイルです。
WordPressのthe_posts_pagination()関数での出力ではなく、読み込んだ投稿にフィルターが効かないため不便だなと感じていました。
例えばpre_get_posts()関数を使い「記事を更新日ごとに並び替え」みた
【SWELL】particles.jsで背景に固定アニメーションを設定する方法
11月24日更新
最新バージョンのSWELL（2.8.1）に対応させました。
WordPressテーマSWELLの背景にparticles.jsでワチャワチャと動くアニメーションを実装した作業メモです。
→実物のサイトを開く
→実物のサイトを開く
サンプルサイト
particles.jsをSWELLに実装したサンプルサイトです。
解説用により構成がシンプルなサンプルを作ってみました↓
【SWELL】検索結果の数を表示する方法|テンプレートのカスタマイズは不要
WordPressテーマSWELLの検索結果ページに、検索条件にマッチした投稿の数を表示するカスタマイズメモです。
こんな感じです↓
テンプレートファイルを編集しないで検索結果数を表示する方法を考え付いたのでコードをシェアします。
ちなみに絞り込み検索プラグインのVK Filter Search Proにも対応しています↓
サンプルサイト
今回のカスタマイズを実装したサンプルサイトです↓
【Coccon】カテゴリーページに記事の表示順を並び替えるボタンを設置 | カスタムフィールド対応
本記事は、WordPressテーマ「Cocoon」のカテゴリーページに投稿記事の並び替えボタンを付けた作業メモです。
最近Cocoonで絞り込み検索機能のあるサイトを作っていて、そういえば並び替え機能があったら便利だなーと思いカスタマイズしてみました。
商品の表示順を変えたりするのはECサイトなんかだと定番の機能なんですが、Cocoonに搭載されていない機能です。
記事の投稿日、更新日での並