WordPressの開発で大切なこと

はじめに

概要

以下の内容は、WordPressの開発において知っておくべき重要な情報です。通常のコーディングやローカル環境とは異なり、キャッシュの影響で正しい表示がされないなど、さまざまな問題が発生することがあります。以下の内容を理解することで、開発の効率を向上させることができます。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

WordPressの開発で大切なことは、最初にどこを理解するとよいですか？

木村

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

キャッシュのクリア

キャッシュのクリアでは、WordPressの開発で大切なこと #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

WordPressはデフォルトでキャッシュを使用してパフォーマンスを向上させますが、開発中にキャッシュが邪魔をすることがあります。開発中はキャッシュをクリアする方法を知っておくことが重要です。

シークレットモードでの確認

一番簡単な方法は、ブラウザのシークレットモードを使用することです。シークレットモードでは、ブラウザはキャッシュを無視してページを読み込みます。

スーパーリロードを活用しよう

また、以下に主要なブラウザでのスーパーリロード（キャッシュを無視して強制的にページを再読込する方法）のキーボードショートカットを説明します。※通常のリロードではキャッシュが削除されず、Webサイトが正しく表示されないケースがあります。 Google Chrome: Windows/Linux: Ctrl + Shift + R Mac: Shift + Command + R Mozilla Firefox: Windows/Linux: Ctrl + Shift + R Mac: Shift + Command + R Safari: Mac: Option + Command + R Microsoft Edge: Windows/Linux: Ctrl + Shift + R Mac: Shift + Command + R 注意: 上記のキーボードショートカットは一般的なものですが、ブラウザのバージョンやオペレーティングシステムによって異なる場合があります。一部のブラウザではキャッシュを無視する機能がない場合もあります。これらの方法を使用すると、シークレットモードまたはスーパーリロードを通じてブラウザのキャッシュを無視してページを再読み込みすることができます。開発中に正しい表示を確認するために、これらの手法を活用しましょう。

ローカル環境の構築

ローカル環境の構築では、WordPressの開発で大切なこと #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

ローカル環境では、インターネットに接続されていないため、外部からの攻撃やハッキングのリスクが低くなります。また、開発中のウェブサイトや機密情報をオフラインの環境で保護することができます。

Local（旧Local by Flywheel）

おすすめは「Local（旧Local by Flywheel）」です。煩雑な構築手順を省いて、簡単にローカル環境を構築できます。こちらの動画わかり易く説明してくれてます。Naomiさんありがとうございます。

Localで対応できること・クライアントや開発メンバーとローカル環境で構築したサイトを簡単に共有できます。・開発の効率を向上させるために、自動リロードがサポートされています。・ワンクリックでサイトのクローンを作成することができます。・プラグインやその他の開発環境をシームレスに引き継ぐことができます。

上記のことは現時点で無料でサポートされてます。

ローカル環境の構築で押さえたいポイント

ローカル環境の構築は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

WordPressの利点を活かそう

WordPressの利点を活かそうでは、WordPressの開発で大切なこと #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

WordPressには大規模なグローバルコミュニティが存在し、多くのユーザーや開発者が情報やサポートを提供しています。

チャットGTPの導入

わからないことがあれば、ChatGPTを利用してみましょう。Wordpressに関する情報は豊富であり、適切な回答を得ることができるため、開発効率が向上します。

WordPressの利点とは

WordPressはCMSであり、プログラミングの知識がなくてもサイトの更新や編集が簡単に行えるツールです。さらに、実装に役立つさまざまなプラグインが豊富に存在します。以下では、それらのプラグインの中から実装に役立つものを紹介します。

抑えておきたいプラグインの紹介・Custom Post Type UI（カスタム投稿）・ACF（カスタムフィールド）・Breadcrumb NavXT（パンくずリスト）・MW WP FORM（お問い合わせフォーム）・WP-PageNavi（ページネーション）・SEO PACK(SEOの設定)

bodyに任意のクラスを付与

bodyに任意のクラスを付与では、WordPressの開発で大切なこと #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

デザインを行う際、親要素の理解は非常に重要です。親要素を基にして子要素をネストすることで、他の要素に干渉せずにデザインを構築できます。 body_class関数を使えば簡単に実装できますが、任意のクラス名を付与することはできません。そのページ独自のidクラスが付与されますが、これはサイトが変わると変更になる可能性があります。そこで、以下ではスラッグ名をbodyクラスに付与する方法を記述いたします。

//---------------------------------------------------------------
// bodyタグにスラッグクラスを付与
//---------------------------------------------------------------
function add_slug_name($class)
{
    if (is_page() || is_single()) {
        $pageinfo = get_post(get_the_ID());
        $class[] = $pageinfo->post_name;
    }
    return $class;
}
add_filter('body_class', 'add_slug_name');

このコードは固定ページまたは投稿ページが表示されたときに、そのページや投稿のスラッグがCSSクラスとしてタグに追加されます。たとえば、スラッグがexample-pageの場合、タグにclass=”example-page”が追加されます。これにより、特定のページや投稿に対してスタイルを適用しやすくなります。

bodyに任意のクラスを付与で押さえたいポイント

bodyに任意のクラスを付与は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

bodyに任意のクラスを付与の確認方法

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

まとめ

開発中はキャッシュをクリアする方法を知っておくことが重要
キャッシュの削除にはシークレットモードでの確認や、スーパーリロードがある
セキュリティ面からもローカル環境で開発することは大切
ローカル環境の構築にはLocalが便利
WordPressは情報が豊富なため、適切な回答を得ることができる
情報の収集にはチャットGTPを活用
WordPressでは更新や編集作業など、様々な機能を追加するためのプラグインが豊富に存在する
上記を意識して、クライアントに対して意味のあるサイトを構築することが大切

WordPressの開発で大切なこと #1/2

目次