WPサイトに必須のプラグインのインストールと設定・使用方法

WordPress网站必备插件安装与配置

WordPress.orgが世界中のウェブ構築分野で揺るぎない地位を築いている理由は、完全オープンソースで柔軟性に富んだ構造、そしてコンテンツ管理システム(CMS)としての優れた機能性に加え、見逃せない中核的な強み——それは成熟した巨大なエコシステムにあります。このエコシステムは単なる付属物ではなく、WordPressが発展を続け、数百万ものユーザーと開発者を惹きつける基盤となっているのです。

「エコシステム」とは何か?それは大きく二つの要素に分けられます。第一は、多種多様でスタイルも豊富なテーマの存在です。開発者向けのカスタマイズしやすいシンプルなベーステーマから、業種別に設計された即時利用可能な商用テーマまで、WordPressのテーママーケットは、個人ブログから企業サイト、複雑なECサイトに至るまで、あらゆる構築ニーズを満たしてくれます。そしてもう一方の柱であり、本記事の焦点でもあるのが「機能拡張プラグイン」です。WordPressプラグインのディレクトリは、建築系CMSの中でも圧倒的なボリュームを誇り、まさに“エコシステムの王者”と呼ぶにふさわしい存在です。新たなニーズやアイデアは常に生まれ続けていますが、すでに提供されているプラグインの数と種類は、ほとんどのオープンソースまたはクローズドソースCMSプラットフォームを凌駕しています。中には長年の更新とユーザー検証を経て、単なる開発ツールではなく、サイト構築に欠かせない「車輪」として、パフォーマンス最適化、安全対策、SEO設定、フォーム管理、キャッシュ加速など、多くの場面で重要な役割を果たしています。

これらのプラグインの存在により、WordPressによるサイト構築はかつてないほど効率的かつ容易になりました。しかし、プラグインの数が多い一方で、適切な組み合わせや正しい設定を行うことは決して簡単ではありません。不適切な選定や設定ミスは、サイトの動作効率を下げるだけでなく、セキュリティリスクにもつながります。そこで本記事では、WordPressサイト構築において、ユーザーから特に支持され、必須とされる代表的なプラグインにフォーカスし、それぞれのインストール手順、設定方法、活用シーンを丁寧に解説します。これにより、プラグイン利用における遠回りを避け、効率を高め、安定的に運営できるよう支援します。WordPress初心者から、サイト性能をさらに最適化したい中級・上級ユーザーまで、自身のサイトに合った最適なプラグイン構成を見つける手助けになれば幸いです。

WordPressチュートリアル記事は、筆者の一貫した執筆スタイルと、読みやすさを重視する姿勢を踏襲しており、構成面においても明確かつ整理された形を心がけています。読者の異なる閲覧スタイルに対応するため、記事を一気に通読して必要なインストール・設定ポイントを把握したい方も、ブックマークして各セクションをじっくり読み進めたい方も、快適に利用できるように設計されています。そのため、《WordPressサイト必須プラグインのインストールと設定》では、各章および小節のタイトルに内部リンク(アンカーリンク)を組み込み、読者が関心のあるセクションにワンクリックでジャンプできるように工夫されています。これにより、自分に最適なプラグイン設定をすばやく見つけることが可能になります。目次は以下にご用意しておりますので、ぜひご活用ください。

一、Elementorページビルダープラグインのインストールと設定

elementor

多数のWordPressページ編集プラグインの中で、Elementorは、現在もっとも多くのユーザーに利用され、高い評価を得ているビジュアルエディターの一つと言えるでしょう。ドラッグ&ドロップ型のページビルダーであるElementorは、直感的な操作インターフェース、豊富なウィジェットライブラリ、そして柔軟なデザイン能力を兼ね備えており、従来のウェブサイト編集のあり方を大きく変えました。そのため、Elementorは今や全世界で1,000万以上のサイトに採用されているページ編集ツールの第一選択となっています。しかし、Elementorは使いやすい反面、その強力な機能を最大限に活かすためには、適切なインストールと正しい設定が不可欠です。本章では、Elementorプラグインのインストール方法をゼロから詳しく解説し、インストール完了後に各サイトのニーズに応じて基本設定を調整する方法をご紹介します。これにより、今後のページ要素開発に向けて機能面の準備を整えることができます。

1、Elementorページビルダープラグインのインストール

Elementorページビルダープラグインのインストール

上図の赤枠で示されている手順に従えば、Elementorのインストールは非常に簡単です。読者の皆様は、WordPress管理画面のプラグインディレクトリから直接検索・インストールすることが可能です。具体的な手順としては、WordPressの管理画面にログインし、左側のメニューから「プラグイン」>「新規追加」と進みます。その後、表示されたプラグイン検索画面の検索ボックスに「Elementor」と入力すると、関連プラグインが自動でリスト表示されます。上図のように、Elementor公式が開発したElementor Webサイトビルダープラグインを見つけ、「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックすれば、Elementorが使用可能になります。

なお、Elementorには無料版とプロ版(Elementor Pro)の2種類が存在します。無料版では利用できるウィジェットの数が制限されていますが、Pro版では数十種類以上の全ウィジェットが使用可能です。筆者の経験では、サイト全体のページ要素を構築する場合、多数のウィジェットを組み合わせて使用することが多く、無料版の制限では編集作業に不便が生じます。したがって、Elementorをインストールした後、ページ編集を始める前にPro版へのアップグレードを行うことを強くおすすめします。すべてのプラグインのPro版へのアップグレードには、Elementorだけでなく共通して以下の2つの方法があります。第1の方法は、国内に該当する代理店が存在するかを確認し、代理店がある場合は直接その代理店からライセンスを購入する方法です。第2の方法は、第1の方法が使えない場合の代替手段として、プラグイン公式サイトから直接Proライセンスを購入する方法です。なぜ代理店からの購入を優先すべきなのかというと、越境決済の問題があるためです。多くのプラグインは海外企業が運営しているため、公式サイトでの購入には外国通貨での支払いが必要となり、手間や費用がかさむ可能性があります。また、単一サイト向けライセンスの価格も代理店経由より高くなる場合があります。

2、Elementorページビルダープラグインの設定

Elementorページビルダープラグインの設定

インストールが完了し、有効化およびPro版へのアップグレードを行った後は、Elementorの基本設定も行う必要があります。Elementorの設定画面へのアクセス方法は、上図の赤枠で示されたパスと同様です。Elementorの設定項目は非常に多岐にわたり、設定画面にある4つのタブごとに多数のチェックボックスや機能切り替えオプションが用意されています。中には、明示的に有効化しないとページ編集中に使えない隠れた機能もあるため、使用予定の機能がすべて有効化されており、現在使用中のテーマや他のプラグインと互換性があることを事前に確認することが重要です。以下に、Elementorの主な設定項目を紹介します:

(1)デフォルトカラーを無効化

Elementorは、ウィジェットやレイアウト要素に対して、初心者が迅速にページを作成できるよう、あらかじめ組み込まれたカラースキームを設定しています。しかし、実際の開発現場では、多くのサイト運営者が自社のブランドカラーやテーマスタイルに基づいてデザインを行います。Elementorのデフォルトカラーを無効にしない場合、内蔵カラーがテーマの設定を上書きしたり干渉したりして、ページのデザイン統一感が損なわれる可能性があります。「デフォルトカラーを無効化」にチェックを入れることで、Elementorはプリセットのカラーを強制的に適用せず、現在のテーマまたはカスタム設定に従ったカラーを引き継ぐようになります。これにより、サイト全体の配色が一貫性を持ち、美しさも保たれます。特にデザインスタイルに明確な基準がある企業サイトやブランドサイトには非常に有効です。

(2)デフォルトフォントを無効化

カラーと同様に、Elementorはあらかじめフォントスタイルも設定しています。デフォルトでは、すべてのコンポーネントに対してこのフォントが適用されます。しかし、もしあなたのサイトがテーマやグローバル設定を使って専用フォント(ブランド指定フォントや特定のタイポグラフィスタイル)をすでに定義している場合、Elementorのデフォルトフォントがその統一性を損なう可能性があります。「デフォルトフォントを無効化」を有効にすると、Elementorは現在のテーマやカスタムCSSで設定されたフォントを自動的に使用し、自身のフォント設定を上書きしません。これにより、全体の文字スタイルが統一され、スタイルの衝突も避けられます。

(3)カスタムブレークポイントの追加

レスポンシブデザインは、現代のウェブサイトにおいて欠かせない要素です。Elementorは、デスクトップ、タブレット、スマートフォンの3つの基本的なブレークポイントを備えており、それぞれのデバイスに応じた表示が可能です。しかし、特定の画面サイズやより細かなデバイス対応が求められる場合、これらのデフォルトブレークポイントでは不十分なことがあります。「カスタムブレークポイントの追加」機能を有効にすると、独自のブレークポイントを複数手動で追加することができ、画面サイズごとのレイアウトやスタイルを柔軟に定義できます。これにより、あらゆるデバイス上で最適なビジュアルとユーザー体験が提供され、特にモバイル対応に高い要求があるサイトには最適です。

(4)ネスト要素

Elementorの初期バージョンでは、ページレイアウトの階層構造が制限されており、複雑な構造の実現がやや困難でした。「ネスト要素」機能を有効にすると、コンテナや内部セクションなどのウィジェットの中に、さらに別のコンポーネントやコンテナを入れ子にすることができるようになります。これにより、ページレイアウトの柔軟性と制御性が大幅に向上します。この機能は、HTMLにおける入れ子構造のdiv要素に近く、多層グリッド、フィルター付きコンテンツ、カード型レイアウト、特定のインタラクションなど、複雑なデザイン要件を実現するのに適しています。精密なページ設計やカスタム構造を必要とする開発者にとって、非常に重要な機能です。

(5)Menu

「Menu」設定項目は、Elementorに最近追加された新機能で、ユーザーが視覚的にナビゲーションメニューをカスタマイズできるように設計されています。従来のWordPressのメニューエディタに比べ、ElementorのMenu機能では、ページ内で直接メニュー項目をドラッグ&ドロップしながら編集でき、スタイルや配置、ドロップダウンのアニメーションなどを柔軟に設定可能です。また、レスポンシブ表示時のメニューの動作も自由に調整できます。これにより、コードの知識がなくても、ブランドイメージに合った個性的で高機能なナビゲーションバーを簡単に作成することが可能になります。

二、TranslatePress多言語対応プラグインのインストールと設定

WordPress多语言翻译插件

越境ECサイトやインディペンデントサイトが多様な地域ユーザーを対象にするようになるにつれて、サイトコンテンツの多言語対応は、現代のWebサイト構築において無視できない重要な要件となっています。特に、越境EC国際企業、そしてグローバルユーザーをターゲットとしたサイトでは、スムーズかつ正確な多言語バージョンを提供することが、ユーザー体験の向上に繋がるだけでなく、グローバル検索エンジンでのパフォーマンス向上にも大きく貢献します。 WordPressの標準機能には、ネイティブの多言語管理機能は組み込まれていないため、高機能な多言語プラグインの導入が必要になります。中でも、TranslatePressは、ビジュアル翻訳インターフェース、SEOに配慮された機能、そして大多数のテーマやプラグインとの高い互換性を備えており、現在最も人気のあるソリューションの一つです。 TranslatePressの最大の特徴は、サイトのフロントエンド上でリアルタイムに翻訳を行える点です。面倒な管理画面に切り替える必要がなく、「見たまま翻訳」できる操作性によって、多言語コンテンツ管理のハードルを大きく下げています。本章では、TranslatePressの基本的なインストール方法から、実際の設定でよく使われるオプションまでを解説し、サイトに完全な多言語構成を素早く構築する手助けをします。

1、TranslatePress多言語翻訳プラグインのインストール

TranslatePress多言語翻訳プラグインのインストール

TranslatePressのインストールは非常に簡単で、WordPressの管理画面から直接プラグインライブラリ経由で取得可能です。上記のスクリーンショットで示した経路に従い、TranslatePressをインストールしてください。操作手順は、WordPressの管理画面で左側メニューの「プラグイン」>「新規追加」をクリックし、検索ボックスに「TranslatePress」と入力します。すると、TranslatePress公式が提供する翻訳・多言語対応プラグインが自動的に表示されます(プラグイン検索結果ページの赤枠参照)。 該当プラグインを見つけたら「今すぐインストール」をクリックし、インストール完了後に「有効化」を押せば、プラグインが正式にアクティブになります。 TranslatePressは無料版を提供しており、追加できる言語は1つまでです。基本的な多言語対応を必要とするサイトにはこの無料版で十分対応可能です。一方、複数言語の統合や、多言語SEO、カスタム言語スイッチャーなどの高度な機能が必要な場合は、プロ版へのアップグレードを検討しましょう。プロ版のプラグインは、国内の代理店から購入するか、公式サイトから直接購入することが可能です。Pro版のzipインストールパッケージを入手したら、WordPress管理画面の「プラグイン」>「プラグインのアップロード」より、通常のプラグインと同じ手順でインストール・有効化を行ってください。 インストールが完了すると、管理画面のサイドバー「設定」メニュー内にTranslatePressの項目が追加され、そこから多言語設定画面に進むことができます。

2、TranslatePress多言語翻訳プラグインの設定

TranslatePress多言語翻訳プラグインの設定

TranslatePressをインストールし、Proバージョンにアップグレード・有効化した後は、その多言語対応機能を最大限に活用するために、各種設定を適切に行う必要があります。以下は設定時に特に注意すべき主要な項目です:

(1)デフォルト言語と追加言語の設定

WordPress管理画面 > 設定 > TranslatePress > 一般設定タブにて、最初に表示されるのが「デフォルト言語」と「すべての言語」の項目です。「デフォルト言語」とは、サイトの基礎言語(サイトの元となる言語)を意味し、ページ内のテキスト編集を行う際の原文言語です。「すべての言語」は追加言語の設定を指し、ここで新たな言語バージョンを追加できます。この欄に表示される各言語が、翻訳作業の対象となる言語です。TranslatePressは、世界中の主要言語を含む数十の言語に対応しており、無料版では1言語のみ追加可能、Pro版では無制限の言語追加が可能です。この設定は、多言語対応サイトにおける基本構成であり、ユーザーに表示可能な言語の選択範囲を決定します。

(2)言語スイッチャーの設定

言語スイッチャーは、訪問者がフロントエンドでサイトの言語をどのように切り替えるかを決定する要素です。TranslatePressは、メニュースイッチャー、ショートコードスイッチャー、フローティングスイッチャーなど、複数の柔軟な設定方法を提供しています。 「メニュースイッチャー」を使えば、言語切り替えオプションをサイトのトップナビゲーションやサイドメニューに追加可能で、「外観 > メニュー」から簡単に設定できます。「ショートコードスイッチャー」を使う場合は、任意のページや投稿のコンテナに [language-switcher] のショートコードを挿入することで、切り替え機能を表示できます。「フローティングスイッチャー」では、画面端に固定表示されるボタンを設置でき、常に簡単に言語を切り替えられるようになります。 いずれのスイッチャーも、表示位置やデザイン、表示形式(テキスト、国旗、またはその両方)を自由にカスタマイズでき、訪問者が直感的に言語切り替えの入り口を見つけられるように設計されています。

(3)翻訳方法の設定

TranslatePressは、「手動翻訳」と「自動翻訳」の2つの翻訳モードをサポートしています。自動翻訳はデフォルトで有効になっており、外部翻訳APIを使用してページのテキストを自動で翻訳します。一方、手動翻訳は、サイトのフロントエンドで可視化された編集インターフェース上で、翻訳したいテキストをクリックしながら1つずつ手動で翻訳内容を入力していく方式です。 手動翻訳は「見たまま編集」に対応しており、翻訳品質を重視するサイトに適しています。自動翻訳を使用するには、Google TranslateやDeepLなどの外部翻訳APIとの連携が必要です。有効にすると、ターゲット言語への翻訳が自動生成され、翻訳作業の効率が大幅に向上します。また、自動翻訳の結果は手動で修正することも可能で、精度を高めることができます。 なお、自動翻訳機能には無料版では制限がありますが、Pro版では使用可能なAPIや翻訳文字数の上限が拡張されます。

(4)多言語SEOの設定

サイトの多言語版を検索エンジンに正しく認識・評価してもらうために、TranslatePressは「SEO Pack(SEOパック)」という専用機能拡張を提供しています。ただし、この機能はデフォルトでは無効になっており、TranslatePress > 設定 > アドオンタブ から手動で有効にする必要があります。 SEOパックを有効にすると、以下のような多言語SEO最適化機能を利用可能になります:

  • SEOページ対応:SEOパックは、各言語バージョンのページに対して、検索エンジンに認識・インデックスされる独立したURL構造(例:/en/、/fr/など言語プレフィックス付きのURL)を生成できるようにします。これにより、重複コンテンツやSEO評価の分散を防ぎ、各言語ページの検索結果におけるパフォーマンス向上が期待できます。
  • ページタイトルと説明文の翻訳:SEOパックを利用することで、各言語バージョンごとにMeta Title(タイトル)とMeta Description(説明)を個別に設定可能になります。これにより、検索エンジンがクローリング時にその言語のコンテンツの主要情報を正確に取得でき、クリック率とSEOの親和性が向上します。
  • ソーシャルメディアのOGP情報対応:SEOパックは、多言語サイトにおけるOpen Graph(フェイスブック用情報)およびTwitter Card(ツイッターカード)タグの対応も強化しており、各言語バージョンに対して、シェア用のタイトル・説明文・サムネイル画像を個別に設定できます。これにより、SNS上でのシェアがよりローカライズされ、専門性とブランド力が向上します。
  • HTMLのlang属性の自動設定:SEOパックは、設定された多言語構成に基づいて、各ページに正確なlangタグおよびhreflangタグを自動的に出力します。これらのタグは、国際対応サイトのSEOにおいて重要な要素であり、検索エンジンに対してそのページの言語および地域を正しく伝えることで、異なる言語ページが重複コンテンツと判断されるのを防ぎます。

(5)フロントエンドのビジュアル翻訳インターフェース

設定が完了したら、フロントエンドページ上部の管理ツールバーにある「Translate Page」をクリックすることで、可視化された翻訳インターフェースに入ることができます。フロントエンド上で「見たまま編集」形式で直接任意のテキストをクリックして翻訳を入力でき、バックエンドに何度も戻る手間が省けるため、翻訳作業の効率が大幅に向上します。

三、WPFormsお問い合わせフォームプラグインのインストールと設定

WordPress联系表单插件

WordPressサイトを機能的に構築する際、「お問い合わせフォーム」はほぼすべてのサイトにおいて欠かせない要素です。企業の公式サイト、越境ECサイト、通販サイトを問わず、シンプルで使いやすいフォームシステムは、コンバージョン向上に大きく貢献します。数あるフォームプラグインの中でも、WPFormsは、「ドラッグ&ドロップによる編集」、「豊富なテンプレート」、「柔軟で拡張性の高い機能」により、世界中のWordPressユーザーから高い評価を受けています。WPFormsは、初心者が素早く基本的なフォームを作成できるのはもちろん、有料版では、支払い統合、ステップフォーム、条件付きロジック、メールマーケティングとの連携など、あらゆるビジネスシーンに対応する強力な機能が用意されています。本章では、WPFormsプラグインに焦点を当て、そのインストール方法と主要な機能設定について詳しく解説し、短時間でフォームの構築とユーザーからの問い合わせ情報収集を実現できるようサポートします。

1、WPFormsお問い合わせフォームプラグインのインストール

WPFormsお問い合わせフォームプラグインのインストール

他のプラグインと同様に、WordPressのプラグインディレクトリから直接「WPForms」を検索してインストールできます。WPFormsには無料版と有料版の2つのバージョンがあり、無料版(WPForms Lite)には基本的なフォーム作成機能が含まれており、シンプルなお問い合わせフォームの構築に適しています。有料版では、マルチページフォーム、支払い統合、条件付きロジック、マーケティングプラットフォームとの統合など、高度な機能が解放され、より複雑なニーズにも対応可能です。

2、WPFormsお問い合わせフォームプラグインの設定

WPFormsお問い合わせフォームプラグインの設定

プラグインを有効化すると、WordPressの管理画面に「WPForms」メニューが追加され、「すべてのフォーム」や「新規追加」から簡単にフォーム作成を始めることができます。ここからは、WPFormsでフォームを作成し、ページに挿入する方法を実演形式でご紹介していきます。

(1)フォーム作成

フォーム作成ステップ1:フォーム作成入口
WPForms插件新增表单

上の図のように、まずWordPressの管理画面のサイドバーから「WPForms」メニューをクリックして、WPFormsプラグインの画面に移動します。右側のコンテンツエリアにある「新規追加」ボタンをクリックすると、新しいフォームの作成が始まります。クリック後、WPFormsのフォーム編集画面に移動するので、この画面でフィールド選択とレイアウト配置の機能について詳しく説明します。

フォーム作成ステップ2:新しいフォームの名前を付け、フォームスタイルを選択
命名新表单及选择表单样式

上記のデモ画像がWPFormsプラグインで新しいフォームを作成するウィンドウです。上部の入力枠に新しいフォームの名前を入力します。WPFormsのPRO版では、豊富なデザイン済みのフォームテンプレートスタイルが提供されており、テンプレートスタイルを選択した後、「テンプレートを使用」ボタンをクリックすることで、すぐに使用できます。既存のフォームテンプレートファイルまたは空白のフォームを使用した後、次のステップのフォームフィールドのレイアウト編集画面に進みます。

(2)フォームフィールドのレイアウト配置

WPForms表单字段排版布局

読者にフォームフィールドのレイアウト配置をよりわかりやすく示すために、前のステップで空白のテンプレートを選びました。WPFormsの空白フォームテンプレートのフィールド編集モードは上の図のようになります。初めてアクセスするか、編集後に保存していない空白のフォームテンプレートでは、右側にフィールドを追加するためのヒントが表示されます。フォームのフィールドをドラッグする前に、フォームのレイアウト配置を計画し、「Layout」フィールドを使ってフォームのレイアウトを作成する必要があります。以下に、フォームフィールドのレイアウト配置操作の詳細な手順を示します。

フォームフィールドのレイアウト配置操作ステップ1: 「Layout」フィールドをクリック
WPForms表单排版布局操作步骤一:点击Layout字段

上の図のように、現在のページの左側にあるフィールド選択ウィンドウで「Layout」フィールドをクリックすると、右側のウィンドウにそのフィールドの設定内容が表示されます。その後、右側の赤枠で示された操作可能なエリアをクリックすると、左側の元のフィールド選択ウィンドウがレイアウトスタイル選択画面に切り替わります。この画面では、フォームのレイアウトスタイルをさらに選択して設定し、より柔軟なフォームのレイアウト効果を実現できます。

フォームフィールドのレイアウト配置操作ステップ2: レイアウトスタイルを選択
WPForms选择排版布局样式

上の図のように、「Layout」フィールドでは、単一列レイアウト、等幅または不等幅の2列フォーム、3列および4列の複数列レイアウトなど、さまざまなレイアウトスタイルを選択できます。ユーザーは実際のフォーム設計に基づいて適切なスタイルを選びます。レイアウトスタイルの選択が完了したら、左側のウィンドウの上部にある「フィールドを追加」ボタンをクリックし、すべてのフィールドの選択画面に戻り、他の必要なフィールドを追加して設定を続けます。

フォームフィールドのレイアウト配置操作ステップ3: フィールドを選択してフォームにドラッグ
选择WPForms表单字段并将其拖拽到表单中

この時点で、上の図のように、左側のフィールド選択ウィンドウからフォームに必要なフィールドを1つずつドラッグして、前のステップで作成したフォームのレイアウトに配置できます。お問い合わせフォームの場合、通常使われるフィールドは、Name(名前)、Email(メールアドレス)、Phone(電話)、Address(住所)、Content(内容テキストエリア)、および単一行テキストなどです。すべてのフォームフィールドがレイアウトに配置された後の画面は、以下のようになります:

WPForms完整的表单字段应用

(3)フォームフィールドの条件設定

カスタムラベル(タイトル)
WPForms自定义标签(标题)

WPFormsの各フィールドはカスタムラベルを実行します。ラベルとはタイトルのことを指します。ここで設定したラベル名は、フィールド入力ボックスの右上に表示されます。カスタムラベルの設定位置は、上図の赤枠で示された場所にあります。

フィールドの必須設定
WPForms字段的必填开关设置

上の図のように、WPFormsの各フィールドの設定画面の下部には、そのフィールドを「必須項目」に設定するためのスイッチがあります。「必須」スイッチを有効にすると、そのフィールドの表示ラベル(タイトル)の末尾に自動的に「」シンボルが追加されます。例えば、「Name」のように表示され、ユーザーにそのフィールドが必須であることを示します。視覚的な違いに加えて、「必須」機能を有効にすると、ユーザーがフォームを送信する前に必ずそのフィールドに入力を行わなければならなくなり、もし入力しない場合はフォームが送信されません。この設定により、ユーザーが重要な情報を入力し忘れるのを防ぐことができます。

フィールドのプレースホルダ設定
WPForms字段的占位符设置

WPFormsのフィールド設定画面では、上のスクリーンショットの赤枠で示されているように、各入力フィールドに対して「プレースホルダーテキスト」をカスタマイズできます。この設定は「高度な設定」タブの下にあり、それぞれ「プレースホルダーテキスト」と「確認用プレースホルダーテキスト」の2つの入力ボックスが表示されます。プレースホルダーテキストとは、ユーザーが入力を開始する前にフィールド入力ボックス内に表示されるヒントのようなテキストで、通常は正しい情報の入力方法や例を示すために使用されます。例えば、「Email」フィールドには「あなたのメールアドレスを入力してください」というプレースホルダーを設定して、ユーザーにこのフィールドの目的が明確に伝わるようにします。適切なプレースホルダーを設定することで、ユーザー体験を向上させ、ユーザーの混乱を減らし、フォームの記入効率を高めることができます。

(4)WPFormsショートコードを使用してフォームをページに埋め込む

フォームショートコードの取得
获取WPF的短码位置

これはWPFormsでフォームを作成した後の最後のステップです。フォームを指定したウェブページに埋め込む前に、まずそのフォームのショートコードを取得する必要があります。ショートコードを使用することで、フォームのスタイルと機能をページに直接ロードできます。ショートコードの取得方法は非常に簡単です。上図のように、「すべてのフォーム」画面に戻り、赤枠で示された場所がそのフォームに対応するショートコードです。このショートコードをコピーして、Elementor編集モードに入り、Elementorが提供する「ショートコード」コンポーネント(または「コード」コンポーネント)を選択します。コピーしたショートコードをそのコンポーネントに貼り付け、適用すると、フォームが指定したウェブページの位置にシームレスに埋め込まれます。

ElementorでWPFormsのショートコードを使用
ElementorでWPFormsのショートコードを使用

WordPress管理画面でWPFormsプラグインを使ってお問い合わせフォームを作成し、フォームのショートコードを取得した後、次にElementorページビルダーを使ってフォームを簡単にページに埋め込むことができます。具体的な操作は、上図のように、Elementor編集画面で「ショートコード」コンポーネント(または「コード」コンポーネント)を見つけて、ページ上の指定した位置にドラッグします。その後、WPFormsで生成したフォームのショートコード(例:[wpforms id=”607”])をショートコードコンポーネントの入力ボックスに貼り付けます。ショートコードの貼り付けが完了したら、ページ右側にフォームの完全なスタイルが即時にプレビュー表示され、フォームの各フィールドのレイアウトと必須マークが表示されます。ユーザーは必要に応じてフォームの位置や周囲のコンテンツを調整できます。この方法で、コードを書くことなく、WPFormsフォームをElementorで作成したページにシームレスに統合することができ、柔軟にフォームを呼び出して表示することができます。設定が完了したら、ページ下部の「公開」ボタンをクリックして、設定を反映させます。

四、WooCommerce商品管理プラグインのインストールと設定

WooCommerce商品管理

もしWordPressがウェブサイト構築の「万能ツール」だとしたら、WooCommerceは間違いなくWordPressのエコシステムで最も強力で広く使われているeコマースソリューションです。WordPressの親会社であるAutomatticが開発したeコマースプラグインであるWooCommerceは、その強力な商品管理機能、柔軟な拡張性、そして世界中の開発者コミュニティのサポートを活かし、数多くのオンラインストア、サブスクリプションサイト、さらにはB2Bプラットフォームの選ばれる商品管理の中心的な枠組みとなっています。WooCommerceは、WordPressサイトで完全なeコマースサイトを構築する手助けをするだけでなく、さまざまな支払いゲートウェイ、配送設定、在庫管理、クーポン、税率設定などのモジュールも内蔵しており、ほぼすべてのオンライン商品取引に必要な要素を網羅しています。また、WordPressと同じ系統であるため、WooCommerceはWordPressとの高い互換性を誇り、サイト全体のパフォーマンスやSEOの親和性を素晴らしい状態で保っています。本章では、WooCommerceプラグインを中心に、基本的なインストールとコア設定の方法について詳しく説明します。具体的な内容は以下の通りです:

1、WooCommerce商品管理プラグインのインストール

WooCommerce商品管理プラグインのインストール

WooCommerceのインストール方法は、前述の他のプラグインと同様で、WordPressの管理画面に入り、左側のメニューから「プラグイン」>「新規追加」をクリックします。プラグイン検索ボックスに「WooCommerce」と入力します。検索結果のページが表示されると、Automattic社から公式にリリースされたWooCommerceプラグインが表示されます。「今すぐインストール」ボタンをクリックして、プラグインをインストール後、プラグインを有効化します。

2、WooCommerce商品管理プラグインの設定

WooCommerceプラグインをインストールして有効化した後、次の重要なステップは、各コア機能を適切に設定することです。これにより、あなたのeコマースサイトが優れた商品管理、取引体験、およびバックエンド運営能力を備えることができます。WooCommerceの設定画面はモジュールが明確に分かれており、店舗の基本設定、支払いゲートウェイ、配送費、商品カテゴリと属性、在庫管理など、さまざまな要素をカバーしています。これらの設定を細かく調整することで、商品情報の構造が明確になり、支払いと配送の流れがスムーズになり、さらに顧客のショッピング体験とバックエンドの運営効率が大幅に向上します。

(1)WooCommerceショップの一般設定

WooCommerce商店常规设置

まず、WordPressの管理画面に入り、左側のメニューから「WooCommerce」>「設定」をクリックします。「一般」タブで、ショップの基本設定項目を見ることができます。まず、ショップの住所を設定する必要があります。これには国/地域、都道府県、市区町村、具体的な住所が含まれます。これらの情報は税率や配送エリアに影響を与えるだけでなく、請求書や通知メールにも表示されます。その後、サイトが対応する販売場所を選択します。これにはすべての国、特定の国、または特定の地域を除外する設定ができます。また、デフォルトの通貨オプション(例:人民元(CNY)、米ドル(USD)など)を設定することができます。これにより、今後すべての商品価格とチェックアウトプロセスがその通貨で表示されます。さらに、税率を有効にするか、顧客がクーポンコードを入力できるかどうかを設定できます。設定が完了したら、ページ下部の「変更を保存」ボタンをクリックして、設定を反映させます。

(2)WooCommerce商品カテゴリと属性管理

WooCommerce商品分类与属性管理

商品を適切に分類することは、ユーザーが必要な商品を迅速に見つけるための重要な前提です。上記の図はWooCommerceの商品カテゴリ管理画面の例です。WordPressの管理画面で「商品」>「カテゴリー」をクリックすると、ここにアクセスできます。この画面で新しい商品カテゴリを作成し、カテゴリ名、スラッグ、親カテゴリを入力し、カテゴリにサムネイル画像を追加できます。例えば、「衣類」や「デジタル製品」などの大分類を作成し、その下に「メンズウェア」「レディースウェア」や「スマートフォン」「ノートパソコン」などの子カテゴリを設定できます。次に、「商品」>「属性」ページに移動し、「色」「サイズ」「ブランド」などのカスタム属性を作成します。各属性は、ドロップダウンリスト、テキスト、または色ブロック形式で設定でき、ユーザーがフロントエンドで商品を絞り込む際に便利です。属性を作成した後、特定の商品編集ページでこれらの属性を呼び出し、商品に特定の属性値を割り当てることができます。

(3)WooCommerce支払いゲートウェイ設定

WooCommerce支付网关配置

支払い方法を設定するには、上の図に示されたWooCommerce支払い設定画面にアクセスします。具体的なパスは以下の通りです:WordPressの管理画面 > WooCommerce > 設定 > 支払い。WooCommerceはデフォルトで、銀行振込、チェック支払い、代金引換、PayPalなど、複数の支払いゲートウェイを提供しています。必要に応じて、対応する支払いオプションを有効にすることができます。各支払い方法の横にある管理ボタンをクリックすると、詳細設定ページにアクセスできます。例えば、PayPalの設定では、PayPalの商業アカウントのメールアドレスを入力し、受け取り通貨を選択し、サンドボックステストモードを有効にするかどうかを設定する必要があります。国内のECサイトの場合は、WooCommerceアリペイウィーチャットペイなどのサードパーティプラグインをインストールして、支払い機能を拡張することもできます。越境EC独立サイトの場合は、世界中のクレジットカード決済をサポートする支払いゲートウェイシステムの提供者を選定し、支払いゲートウェイ企業とWordPressウェブサイト開発会社が連携して、決済システムを接続する必要があります。設定が完了したら、必ず支払いテストを行って、プロセスが正常に動作することを確認してください。

(4)WooCommerce配送と送料の設定

WooCommerce配送与运费设置

上の図のように、配送設定はWooCommerce > 設定 > 配送にあります。まず、配送エリアを追加する必要があります。全国範囲、特定の国または都市などを選び、各エリアに対して配送方法を設定します。WooCommerceでサポートされている配送方法には、固定送料、無料配送、店頭受取などがあります。各配送方法では、さらに具体的な費用を設定できます。例えば、固定送料では基本料金を設定し、商品重量、数量、注文合計額などに基づいて条件を追加できます。また、追加の配送プラグインをインストールして、地域別送料やカスタム物流サービスのAPI連携などの機能を実現できます。設定が完了したら、配送オプションと配送クラスのタブに切り替え、配送計算とデフォルト設定がビジネスのニーズに合っているか確認してください。

(5)WooCommerce在庫管理

WooCommerce库存管理

上の図のように、WooCommerceの在庫管理機能の設定項目は、商品編集モード画面の「製品データ」セクションにあります。ここでは、商品の在庫数、在庫切れの閾値、在庫不足の通知閾値、在庫切れ時の販売を許可するかどうかを設定できます。

(6)WooCommerceメール通知テンプレートの調整

WooCommerce邮件通知模板调整

WooCommerceにはさまざまなメールテンプレートが内蔵されており、取引の各段階でユーザーや管理者に通知メールを送信します。上の図のように、WooCommerceのメール設定操作画面では、WooCommerce > 設定 > メールからこのページにアクセスし、すべてのメールタイプを管理できます。新規注文、注文キャンセル、注文完了、パスワードリセットなどがあります。各メールの横にある「管理」ボタンをクリックすると、送信者名、送信者のメールアドレスをカスタマイズしたり、メールの件名やヘッダーのテキストを変更したり、ブランドロゴをアップロードしたりできます。同時に、WooCommerceはテーマのwoocommerce/emailsフォルダを介して、メールのHTMLテンプレートをオーバーライドすることもサポートしており、より高度なビジュアルカスタマイズが可能です。設定が完了したら、テストメールを送信して、スタイルと内容がブランドの要件に合っているか確認することをお勧めします。

五、UpdraftPlusサイトバックアッププラグインのインストールと設定

WP网站数据备份

WordPressサイトの運営において、データの安全性は非常に重要です。ウェブサイトのコンテンツ、データベース情報、テーマやプラグインの設定などは、サーバーの障害、ハッカー攻撃、操作ミスなど、さまざまな原因で損失のリスクがあります。そのため、安定かつ信頼性のあるバックアップ体制を構築することが極めて重要です。数あるワンクリックでバックアップが可能なプラグインの中でも、UpdraftPlusは、最も人気があり、かつ高機能なソリューションのひとつです。UpdraftPlusは、使いやすさ、ワンクリックによるバックアップと復元操作、多様なリモートストレージのサポート、優れた拡張性により、多くのWordPressサイト管理者に選ばれているバックアップツールです。 このプラグインは、サイトファイルとデータベースの手動およびスケジュールバックアップをサポートしているだけでなく、バックアップファイルを自動的に複数のクラウドストレージサービスにアップロードすることもできます。例として、Google DriveDropboxAmazon S3FTPなどがあり、データの安全性と柔軟性が大幅に向上します。 ここからは、前述のプラグイン解説と同様に、明確な構成でUpdraftPlusプラグインのインストールと設定手順を順を追って説明し、読者がすぐに使い始められるようにします。具体的な操作手順は以下の通りです。

1、UpdraftPlusサイトデータバックアッププラグインのインストール

UpdraftPlusサイトバックアッププラグインのインストール

UpdraftPlusのインストール方法は、他のプラグインと特に違いはありませんので、ここでは詳細な説明は省略します。この記事のこの部分を目次から直接選んでご覧になっている読者は、ページを上にスクロールして他のプラグインのインストール方法をご参照ください。同様の手順で問題ありません。

2、UpdraftPlusサイトバックアッププラグインの設定

UpdraftPlusサイトバックアッププラグインの設定

UpdraftPlusの優れている点は、その柔軟で細かい設定オプションにあります。ウェブサイトの実際のニーズに応じたバックアッププランを作成することができます。ここからは、UpdraftPlusの設定およびバックアップ機能の重要ポイントを段階的に解説し、安全かつ効率的なバックアップの実現をサポートします。

(1)UpdraftPlusでバックアップする内容の選択

UpdraftPlus选择备份内容

上の図の赤枠に示されているように、WordPress管理画面の左サイドバーでUpdraftPlusプラグインのアイコンをクリックし、UpdraftPlusの使用画面に入ります。続いて、右側のコンテンツエリア上部のタブから「設定」タブをクリックします。画面にはまず「ファイルのバックアップスケジュール」と「データベースのバックアップスケジュール」の設定項目が表示されます。ブラウザのスクロールバーを下にスクロールすると、「ファイルバックアップに含める項目」の選択セクションが現れます。具体的には以下の内容が含まれます:

  • プラグイン:このオプションはデフォルトで選択されています。つまり、現在のサイトにインストールされているすべてのプラグインファイル(有効・無効を問わず)がバックアップ対象となり、復元時にプラグイン環境を完全に再現できます。
  • テーマ:この項目を選択すると、UpdraftPlusはサイトにインストールされているすべてのテーマファイルをバックアップします。現在有効なテーマだけでなく、予備のテーマも含めて完全に保存されます。
  • アップロードディレクトリ:これは、WordPressメディアライブラリにアップロードされたすべてのコンテンツ(画像、音声、動画、ドキュメントなど)に対応しており、サイトのコンテンツとビジュアルの一貫性を確保するために必要です。
  • Must-use plugins(必須プラグイン):この項目はバックアップの重要な構成要素です。通常、wp-content/mu-plugins ディレクトリに配置され、管理画面から無効化できない自動読み込み型のプラグインです。UpdraftPlusではこれらの重要なプラグインもバックアップ対象に含めるための専用オプションが用意されています。
  • wp-content内のその他のディレクトリ:この設定を使用することで、wp-contentディレクトリ配下にある他のフォルダ(たとえば、キャッシュフォルダ、カスタムアップロードディレクトリ、サードパーティ製プラグインによって生成されたフォルダなど)を追加で指定することができ、バックアップの網羅性を高めることができます。

(2)UpdraftPlusのファイルバックアップ計画とデータベースバックアップ計画

文件备份计划和数据库备份计划

上の図のとおり、UpdraftPlusの設定画面では、サイトデータの自動バックアップ機能が「ファイルバックアップ計画」と「データベースバックアップ計画」の2つに明確に分かれており、それぞれサイトのファイルとデータベースに関するバックアップ周期および保持数を設定できます。

ファイルバックアップ計画では、サイトディレクトリ内のすべてのファイル(テーマ、プラグイン、アップロードメディアファイルなど)をバックアップします。設定画面の「ファイルバックアップ計画」ドロップダウンメニューでは、バックアップ頻度を選択できます。選べる周期には、「2時間ごと」「4時間ごと」「8時間ごと」「12時間ごと」、「毎日(Daily)」「毎週(Weekly)」「隔週(Fortnightly)」「毎月(Monthly)」などがあります。自動バックアップを行いたくない場合は「手動」を選択し、必要な時に手動でバックアップボタンをクリックすることで実行できます。 その隣の入力欄では、バックアップファイルの 保持数 を設定できます。たとえば「2」と入力すると、プラグインは最新の2回分のバックアップを自動的に保持し、それを超えた古いバックアップは自動削除され、サーバー容量の無駄な消費を防ぎます。

データベースバックアップ計画は、サイトのデータベースに対するバックアップを行います。これは、投稿、固定ページ、ユーザー情報、コメント、注文データなどの動的データの安全性を守るためのものです。ファイルバックアップと同様に、データベースバックアップにも個別の頻度を設定できます。周期オプションには「2時間ごと」から「毎月」までが用意されています。頻繁に更新があるECサイトやブログなどでは、「毎日」または「12時間ごと」など、より高頻度のバックアップを設定することを推奨します。データベースバックアップの 保持数 も、任意の数値を入力することで、過去のバックアップの保存数を調整できます。

(3)UpdraftPlusのリモートストレージ設定

UpdraftPlus配置远程存储

UpdraftPlusの「設定」タブにある「リモートストレージの選択」は、バックアップデータの保存先を決定する重要なステップです。この設定によって、バックアップファイルがどこに保存され、どのようにデータの安全が確保されるかが決まります。プラグインは、Dropbox、Google Drive、Amazon S3、Microsoft OneDrive、さらに FTP や SFTP サーバーなど、主要なリモートストレージオプションを多数提供しています。該当するストレージサービスのアイコンをクリックし、表示される指示に従って認証を行うか、接続情報を入力してください。設定が完了すると、今後のバックアップファイルは自動的に指定されたリモート先にアップロードされるようになり、単一のサーバー障害によるデータ損失のリスクを回避できます。

(4)UpdraftPlusのバックアップと復元操作

UpdraftPlus的备份和恢复操作

上図のとおり、UpdraftPlusは直感的で使いやすいバックアップと復元の機能を提供しています。WordPress管理画面からUpdraftPlusのメインインターフェースにアクセスし、上図の赤枠で示された上部メニューの「バックアップ」ボタンをクリックすることで、ワンクリックでサイト全体のバックアップを実行できます。 さらに、作成されたバックアップファイルは、現在のページの下部にリスト形式で表示されます。各バックアップの記録には、バックアップの日付や、含まれている内容(データベース、プラグイン、テーマ、アップロードファイルなど)が詳細に記載されています。復元したいバックアップを選択し、必要な項目にチェックを入れたうえで、「復元」ボタンをクリックすると、復元プロセスが開始されます。プラグインはバックアップファイルを自動的に解凍し、サイトディレクトリへ復元します。複雑な操作は不要で、突発的なトラブルにも迅速に対応できます。

まとめ:これにて、『WordPressサイト必須プラグインのインストール・設定および使用方法』の記事は、WordPressサイトの構築過程における主要プラグインのインストールおよび基本的な設定方法について、網羅的に解説を終えました。ページビルダーのElementor、多言語対応を実現するTranslatePress、効率的なフォーム管理が可能なWPForms、さらに商品管理やECサイト運営に不可欠なWooCommerce、そしてサイトの安全性を守るUpdraftPlusまで、各プラグインの操作手順を詳細にご紹介しました。本記事は、初心者の方はもちろん、経験豊富な開発者の皆様にも、これらのプラグイン機能を簡単に理解・導入いただけることを目的としています。 WordPressのエコシステムにおいて、これらのプラグインはすでに「インフラ」とも言える存在であり、適切に活用することで、開発効率を大きく向上させるだけでなく、サイトの安定性と拡張性も確保することができます。この記事が、皆様の今後のWordPressプロジェクトにおける実用的な参考資料および技術ガイドとなることを願っております。 なお、ここまでお読みいただいた方の中には、WordPressの基礎プラグインの機能や活用方法を知りたいだけで、実際に自分で開発や設定を行うご予定がない方もいらっしゃるかもしれません。そのような場合は、専門的な作業はぜひプロフェッショナルにお任せください。論理思デジタルテクノロジーまでお気軽にお問い合わせください。サイトの設計からプログラミング開発まで一貫したWordPressカスタマイズソリューションをご提供し、貴社プロジェクトの迅速な実現をサポートいたします。

この記事はロジックシー・デジタルテクノロジー株式会社(SZLOGIC)によって著作権を所有しています。個人的なシェアや学習は歓迎しますが、無断で商業目的での使用や転載は厳禁です。

もっと詳しく知る

Leave a Comment

自研WordPress插件

ReadEasy–集成了数十种网站信息阅读功能的WordPress网站无障碍阅读器
TranslateEasy–提供全球电子商务网站、贸易网站和多语言网站翻译支持
网站管理多合一插件–会员中心,联系工单,客服咨询,微信支付宝接入,商品销售

图像Ai | 语言Ai

语言Ai应用

绘画Ai应用

逻辑思圆形LOGO

WeChat scan code

逻辑思数字科技Truman
客服热线
4000-166-198