PHPに頼らずに固定ページとブロックエディターでサイトを作る方法【WordPress】

サイトを作ると聞くと「HTMLでパーツをゼロから作って」とか「PHPファイルを編集して」などコーディングでカタカタと制作している姿を想像する人も多いと思います。

確かにWordPressではテーマのPHPを直接編集したり、サイトへPHPファイルをアップロードする形で制作する方法もありますが、有識者でないと編集や修正がしにくいというデメリットがあります。

それに、固定ページを使う方法であれば、ブロックエディターを活用して、PHPに頼らなくてもサイトは十分に制作できます。

本記事では、WordPressで固定ページを活用してサイトを制作する流れを初心者向けに解説します。

なぜPHPで作らない方が良いのか？

WordPressはPHPファイルを編集することで、テーマに縛られず自由に制作することができます。

しかし、僕個人としては、PHPファイルを直接触る方法はあまりおすすめできません。

理由は下記の通り。

特に案件でのサイト制作や継続的な運用を考えると、「編集しやすい構造」にしておくことがとても重要です。

そこで活用したいのが、固定ページを使ってブロックエディターで作る方法。

これならWordPressのダッシュボードから直感的に編集できて、サイト制作に詳しくない方でも簡単な編集なら容易に行うことができます。

WordPressの固定ページでサイトを作る流れ

それでは、実際に固定ページでサイトを制作していく流れを見ていきましょう。

必要な固定ページを作成する

まずは、トップページやお問い合わせページといった、サイトに必要なページの数だけ固定ページを用意します。

管理画面の「固定ページ」から新規追加を行い、各ページを作成していきます。

ブロックエディタでパーツを配置していく

次に、各ページをブロックエディタでパーツを配置していきましょう。

見出しや画像、ボタンなど、投稿ページと同じようにパーツを追加していけば問題ありません。

ただ、これらのパーツは後からデザインを追加していくので、セクションやブロック単位で考えておくと、後から調整しやすくなります。

各パーツに固有クラスを付ける

デザインを整えるために、各パーツに固有クラスを付けていきます。

やり方は簡単で、パーツを選択して「高度な設定」から、追加CSSクラスを入力するだけで完了。

固有クラスは意味の分かるように名付けておくと、後から編集しやすくなります。

CSSでデザインを実装する

固定ページでレイアウトと固有クラスの設定が完了したら、次はCSSでデザインを整えます。

外観 → カスタマイズ → 追加CSSか、別途CSSファイルを作る方法でデザインを作っていきます。

別途CSSファイルを作る場合でも、リアルタイムで参照できるので、制作時には追加CSSを使う方法がオススメです。

cssファイルの作り方やWordPressへの実装方法は長くなってしまうので今回は省略します。

デザインの実装が完了したら動作チェックをして完了です。

まとめ

今回は、WordPressの固定ページを使ってPHPに頼らずにサイトを制作する方法について解説しました。

テーマファイルを直接編集するのではなく、固定ページとブロックエディターを活用することで、初心者でも管理しやすいサイトを作ることができます。

この流れを押さえておけば、WordPressでも柔軟で扱いやすいサイトを制作できるので、ぜひ参考にしてください。