Web活のロゴ

Web制作Output&初心者のための徹底ガイド

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

2023.06.23Wordoressの開発で大切なこと
はじめに
概要

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

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

キャッシュのクリア

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

注意: 上記のキーボードショートカットは一般的なものですが、ブラウザのバージョンやオペレーティングシステムによって異なる場合があります。一部のブラウザではキャッシュを無視する機能がない場合もあります。

これらの方法を使用すると、シークレットモードまたはスーパーリロードを通じてブラウザのキャッシュを無視してページを再読み込みすることができます。開発中に正しい表示を確認するために、これらの手法を活用しましょう。

ローカル環境の構築

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

Local(旧Local by Flywheel)

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

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

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

WordPressの利点を活かそう

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

チャットGTPの導入

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

WordPressの利点とは

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

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

bodyに任意のクラスを付与

デザインを行う際、親要素の理解は非常に重要です。親要素を基にして子要素をネストすることで、他の要素に干渉せずにデザインを構築できます。
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”が追加されます。これにより、特定のページや投稿に対してスタイルを適用しやすくなります。

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