WordPressテーマカスタマイズ実例・解説
ブロックの追加機能（幅広・全幅・マージン・パディング等）や配置指定を自動的にテンプレートへ反映させるには【WordPress】
WordPressテーマの自作やカスタマイズにおいて、これまでは add_theme_support() で「幅広・全幅」「マージン・パディング」等のエディターの追加機能を有効化しつつ、フロントエンドに反映されない一部の項目はCSSを書き足...
ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】
WordPressのブロックエディターで横並び等のレイアウトに重宝する「カラムブロック」ですが、デフォルトではカラムの中央揃えや両端揃えの指定ができません。そこで、カラムブロック用のブロックスタイルを追加して中央揃えや両端揃え等の指定ができ...
「投稿」内に配置したブロックにのみCSSを適用してエディター上にも反映する【WordPress】
WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておくことで記事の...
Facebookページの投稿を取得してPHPで表示する【2022年版】
企業やグループ等のFacebookページに投稿された記事データを取得してウェブサイトに表示する手順です。今回はPHPで表示する方法を使っています。使用したバージョン Facebook グラフAPI v15.0Step1. Facebookア...
ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】
WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。今回はエディターでの編集が少しでも快適にな...
見分けにくい再利用ブロックを判別しやすく改善する【WordPress】
WordPressのエディターに搭載される再利用ブロックを使って配置したブロックは、それが再利用ブロックであることが分かりにくいのが難点です。そこでエディター上の再利用ブロックの外観を調整する方法でこの問題を解決します。使用したバージョン ...
レスポンシブなページネーションのCSSデザインサンプルとWordPressへの実装方法【スマホも見やすく】
スマホやPC等、異なるサイズのディスプレイに対応したページネーションのデザインサンプルです。ベースとなるページネーションは「レスポンシブなページ送りの設置」で紹介したfunctions.phpに追加するタイプを使います。ここで紹介するデザイ...
register_sidebar() で編集可能なウィジェットエリアを設置する【WordPress】
多くのテーマでは管理メニューの「外観 > ウィジェット」でサイドバー（ウィジェットエリア）の編集が可能ですが、ウィジェット機能を持たないテーマや自作テーマではカスタマイズして機能を有効にする必要があります。今回はそんなテーマにウィジェット機...
レスポンシブなページ送りの設置｜WP_Queryにも対応【WordPress】
archive.php や category.php 等のアーカイブテンプレートのほか、固定ページで new WP_Query を使用した投稿一覧にも使用可能なページ送りを設置します。設置したページ送りの見栄えを整えるためのCSSデザインサ...
ブロックエディター（Gutenberg）にオリジナルのブロックスタイルを追加する【WordPress】
ブロックエディター（Gutenberg）ではブロックスタイルという機能があり、これを利用するとブロック毎にあらかじめ用意された装飾を選択可能になります。使用しているテーマによってはブロックスタイルが用意されているものもありますが、ここではオ...