WordPressとは、端的にいえばWebサイトの作成や管理の用途に使用されるツールです。
世界的に普及しており、ビジネスで使用されるケースも少なくありません。中には、「WordPressの開発って大変そう」「エンジニアじゃないと作れないのでは?」など、悩む方も多いのではないでしょうか。しかしWordPressは、ポイントさえ理解できれば、簡単に開発へ活用可能です。この記事ではWordPressの開発でできることや、WordPressの開発環境を構築する方法などについて解説します。
目次
ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案
WordPressの開発でできること
Webサイトを構築しようとした場合、HTMLやCSSなどさまざまな知識が必要です。しかしWordPressの開発には、そのような知識は必要ありません。自作テンプレートを作れる、自作テーマを作成できるなど、自由度が高いのがメリットです。以下では、「WordPressの開発でできること」の具体的に見ていきましょう。
●自作テンプレートが作成できる(会社の情報、ロゴ、サイズ 等)
WordPressには、デザインテンプレートの「テーマ」があります。WordPressのテーマは、無料のものと有料のものがあり、自由に変更可能です。そのため、画像にロゴを使う、サイズを変更する、テキスト部分に企業情報を入れるなど、自由にデザインできることが人気の秘密です。
●自作テーマが作成できる
WordPressでは、オリジナルのテーマを作成できます。もともとWordPressにあるテーマには、必要のない機能も混じっているため、読み込みに時間がかかることもあります。しかしそのような機能を外したオリジナルテーマを作ることで、表示が速くなるのがメリットです。また、テーマを作成する場合、PHPの知識が必要です。ただし、エンジニアのような知識は必要ありません。PHPの基礎知識と仕組みを知ってさえいれば、定型コードのコピー&ペーストなどでテーマを作成できます。
●自作プラグインが作成できる
プラグインとは、WordPressの拡張機能のことをいいます。WordPressには標準機能がありますが、プラグインをダウンロードすることで、便利な機能を追加できます。例えば、以下のようなあらゆるプラグインが存在します。
-
サイトマップ表示のためのプラグイン
-
お問い合わせフォーム設置のためのプラグイン
-
吹き出しを表示できるプラグイン
-
スパム投稿の防止ができるプラグイン
便利なプラグイン機能ですが、既存のプラグインでは使い勝手が悪いこともあるでしょう。自作のプラグインを作成すると、そのような悩みも解決可能です。PHPの開発経験やHTML・CSSの知識がある人なら、自作のプラグインを作成できるでしょう。
WordPressの開発をする時に気を付けたいポイント
WordPressを開発する時、どんなことに気を付けたら良いのでしょうか。ここでは、WordPressの開発における主な注意点を解説します。
●WordPressの基本構造を理解しておく
WordPressの開発は、基本構造を理解する必要があります。まずは、テーマがどのような構造になっているのか見ていきましょう。WordPressのテーマは、「/wp-content/themes/」の中に入っており、テーマの構成ファイルは下記のようになっています。
構成ファイル | 概要 |
---|---|
index.php | ブログなどWordPressで作成したページの表示に使用されるページです。 |
header.php | ページの上部を構成するファイルです。会社のロゴマークなどが設置されている部分です。 |
footer.php | ページの下部を構成するファイルです。copyrightや会社の住所などを表示します。 |
page.php | page.phpは固定ページとして表示されます。SEOを意識したページを作る場合、便利なページです。 |
single.php | single.phpは投稿ページを表示します。 |
archive.php | カテゴリーページなど、記事のリストを表示します。 |
sidebar.php | 2カラムや3カラムなどのページでサイドバーを表示します。 |
404.php | 存在しないページにユーザーが飛んだ時に表示します。 |
style.css | ページのデザインを定義するファイルです。色や幅などデザインに関することが記述されています。 |
function.php | 機能に関するファイルです。ウィジェットの追加、メニューの表示場所の設定などができます。 |
●WordPress開発の全体像を知る
WordPressの開発の基本構造がわかったら、次は全体像を知りましょう。WordPressのファイル構成は、以下のようになっています。開発をする場合、必ずバックアップを取るのをおすすめします。万が一ファイルが壊れるとサイトが表示されなくなるため、注意が必要です。
構成ファイル | 概要 |
---|---|
wp-admin | 管理画面を構成するフォルダです。 |
wp-content | テーマやプラグインが入ったフォルダです。自作のテーマやプラグイン作成の場合、このフォルダを使います。 |
wp-includes | システムに関するフォルダです。 |
wp-config.php | 設定情報に関する重要なファイルです。 |
index.php | ユーザーがサイトにアクセスした時、読み込まれるファイルです。 |
wp-login.php | ユーザー登録、認証などログインに関するファイルです。 |
wp-load.php | 関数など動作に必要なプログラムを読み込むファイルです。 |
.htaccess | アクセス制御に関するファイルです。 |
●WordPress開発の環境を構築する
パソコンでWordPressの環境を構築する場合、ローカル環境を設定します。すでに動いているサイトで構築した場合、失敗するとサイトが閲覧できなくなるなどのリスクがあるからです。ローカル環境下で開発することにより、初心者の方でも安心して開発できます。ローカル環境下では、何度でもテスト可能です。テストで問題なければ本番環境に移行しましょう。なお、WordPressの基本的な使い方については、以下のページでも解説しています。WordPressの基本構造について知りたい方は、別ページをご覧ください。
WordPressとは?基本的な使い方から導入するメリットなどを詳しく紹介
WordPressの開発環境を構築するには
WordPressを使った開発を検討している方に向けて、WordPress(日本語版)の開発環境を構築する手順を解説します。ローカル開発環境を構築するためには、「XAMPP」をインストールする必要があります。ここでいうローカル環境開発とは、自分のパソコン上でのみ動作するWebサイトの仮想環境のことです。ローカル環境は、インターネットに接続していない状態でも作業できる、本番環境を気にせず何度でも検証できる、サーバなしでサイト構築できるなどのメリットがあります。
XAMPP は、Webサイトの動作に必要なツールを一括してパソコン上に導入できる無料のソフトウェアのことです。このXAMPPは、以下の要素で構成されています。
-
X:クロスプラットフォーム
-
A:Apache(アパッチ)
-
M:MySQL(マイ・エスキューエル)
-
P:PHP
-
P:Perl
XAMPPの名前の由来は、5つの言葉の頭文字です。Apacheとは、最も普及しているWebサーバであり、MySQLはオープンソースのリレーショナルデータベース管理システムです。PHPとPerlはプログラミング言語のことを指します。XAMPPを使った、ローカル環境の作り方について解説します。
●XAMPPを公式サイトからインストールする
まずは、XAMPPを公式サイトからインストールしましょう。以下の手順でXAMPPをインストールし、コントロールパネルの準備をします。
- 「ダウンロード」の場所から該当するXAMPPを選び、インストーラーをダウンロードする
- OSのバージョンは「Windows」「Linux」「Mac」の3種類から使用しているパソコンに合うものを選ぶ
- XAMPPをインストールする
- インストーラーに従って作業していき、完了させる
- 「C:¥xampp¥xampp-control.exe」からXAMPPのコントロールパネルを開く
- ApacheとMySQLを起動する
この手順で、XAMPPのインストールは完了です。
●WordPressをインストールする
続いて、WordPress日本語版を公式サイトからインストールしましょう。以下の手順でWordPressをインストールし、XAMPP内に設置します。
- 公式サイトの「WordPressをダウンロード」のボタンをクリックしてZIPファイルをダウンロード
- ZIPファイルをPC上で解凍する
- 取得したWordPressのフォルダを、XAMPP内の「htdocs」フォルダ配下に移動(C:¥xampp¥htdocs¥wordpress)
- 設置したWordPressフォルダのパスを控えておく(Webサーバの設置で必要なため)
●Webサーバを設定する
「Apache」の設定ファイルを変更すると、ブラウザからWordPressにアクセスできるようになります。以下の手順でWebサーバを設置します。
1. XAMPPのコントロールパネルからConfigボタンを押して「Apache(httpd.conf)」をクリック
2. Apacheの設定ファイルを開き、ファイルの末尾に下記の設定内容を追加
# wordpress Listen 50000 ServerName localhost:50000 DocumentRoot “C:xampp¥htdocs¥wordpress” <Directory “C:¥xampp¥htdocs¥wordpress”> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Require all granted |
※複数のWordPressサイトを設置する場合、ポート番号「localhost:50000」の番号をずらす(例:50001)
3.ファイルを保存し、Apacheを再起動する
4.WordPressにアクセスできるかブラウザで確認(ブラウザのURLは http://localhost:50000/)
5.WordPressのインストール画面が出たら設定が正しいことを確認
●WordPressにアクセスし、データベースを作成する
WordPressにアクセスし、データベースを作成します。データベースとは、コンピュータ上に集積された情報のことです。WordPressでは、「MySQL」を使用します。以下の手順でデータベースを準備します。
- XAMPPのコントロールパネル、MySQLの欄にある「Admin」をクリックする
- MySQLの管理ツールである「phpAdmin」の画面が表示される
- 画面左の「新規作成」をクリックする
- データベース名を任意名「wordpress」とし、右側は「utf8_gereral_ci」を選び、作成ボタンを押すと完了
- MySQL上に新しいデータベースが作成されたことがphpAdminの画面より確認できる
●インストール作業を完了させる
「http://localhost:50000/」を開き、以下の手順でインストール作業を進めます。
- 「さあ、始めましょう」をクリックする
- 作成したデータベース情報より「データベース名」「ユーザー名」「パスワード」「データベースのホスト名」を入力し送信
- 「インストール実行」をクリックする
- 「サイトのタイトル」「ユーザー名」「パスワード」「メールアドレス」を入力する
- 「WordPressをインストール」をクリックする
- 「ログイン」をクリックし、「ユーザー名」「パスワード」を入力後、「ログイン」をクリックする
WordPressの開発例「自作テーマの作り方」
WordPressでは、自作テーマを作成できます。ここから自作テーマの作り方について解説します。
●作成に必要なWordPressのテーマファイルを決める
テーマは上述のようにindex.php、header.php、footer.php などから構成されています。
まず、WordPressの/wp-content/themes/の配下に自作用のフォルダを作成しましょう。フォルダ名は英数表記で作成します。次にフォルダの中にindex.phpとstyle.cssを作成しましょう。続けてstyle.cssの1行目に下記の内容を入れます。style.cssにコメントヘッダーを入れないとテーマとして認識されません。style.cssにコメントヘッダーを入れると、WordPressの管理画面から認識できるようになります。
/* Theme Name: Sample WordPress Theme Theme URI: テーマのURLを記入 Author: テーマの作者(組織名)を記入 Author URI: テーマの作者のURLを記入 Description: テーマの説明文を記入 Version: 1.0 */ |
●入力項目に沿って作成する
必要なphpファイルを作成し、テーマフォルダに入れることで自作のテーマを作成できます。
例としてindex.phpの作成方法の手順をご紹介します。
- あらかじめindex.htmlを作成
- WordPress内の自作のテーマ内(/wp-content/themes/<自作テーマ名>)のindex.phpに貼り付ける
- 貼り付けたindex.phpの中に<script></script>タグがある場合削除
- WordPressの/wp-content/themes/<自作テーマ名>の配下にheader.phpとfooter.phpを置く
- index.phpのヘッダー部分をheader.phpにカット&ペーストする
- index.phpのフッター部分をfooter.phpにカット&ペーストする
- index.phpのヘッダーがあった部分に<?php wp_header();?>のコードを追加する
- フッター部分には<?php wp_header();?>のコードを追加する
●作成したファイルをftp上でアップロードする
作成したテーマは、ftpソフトで/wp-content/themes/へアップロードします。
●オリジナルテーマを有効にする
自作のテーマを有効化することで外観を変えることができます。下記の手順でテーマを有効化しましょう。
- WordPressの管理画面に入る
- サイドバーの「外観」から「テーマ」をクリックする
- 自作テーマが出てきたら「有効化」をクリックする
- トップページにアクセスし、自作のテーマになっているか確認する
テーマ作りのポイント
ここからはテーマ作りを成功させるポイントを見ていきます。
●作成するテーマファイルの意味を理解する
自作テーマを成功させるには作成するテーマファイルの意味を理解することが必要です。「header.phpはヘッダーのこと」「index.phpは内容のこと」などそれぞれのファイルがどのような働きをするのか知ることが大事でしょう。意味を理解することで変更もスムーズになります。
●カスタマイズができるようにしておく
WordPressのテーマ制作のポイントはカスタマイズです。自作のテーマであれば、余分な機能を外し、読み込みの速いサイトを作れます。WordPressを自作することで、理解も深まり、自由に好みのデザインや機能を持ったサイトを作れるようになるでしょう。
早急にWordPressの開発をしたいなら外注も視野に
WordPressは自作でテーマを作ることが可能です。HTML、CSS、PHPの知識があれば自社で作ることも可能でしょう。しかし、対外的にアピールできるような魅力的なサイトにするには、プロの力を借りることも必要です。「WordPressの開発についての知識がないけど、すぐ開発したい」「Webサイトをすぐにグレードアップしたい」という方は、システム開発会社に依頼することをおすすめします。
外注するメリットについては、以下のページでご紹介しています。
Webシステムは内製か外注か?メリット・デメリットを理解し比較検討しよう!
また、外注先がなかなか絞れない、選ぶのが難しいという方に向けて、以下のページではおすすめの開発会社をご紹介しています。いずれも、WordPressの扱いに長けたシステム開発会社なので、企業の希望に見合ったサイト制作を行ってくれます。
システム開発の最適な発注先をスムーズに見つける方法
システム開発会社選びでお困りではありませんか?
日本最大級のシステム開発会社ポータルサイト「発注ナビ」は、実績豊富なエキスパートが貴社に寄り添った最適な開発会社選びを徹底的にサポートいたします。
ご紹介実績:22,000件(2024年10月現在)
外注先探しはビジネスの今後を左右する重要な任務です。しかし、
「なにを基準に探せば良いのか分からない…。」
「自社にあった外注先ってどこだろう…?」
「費用感が不安…。」
などなど、疑問や悩みが尽きない事が多いです。
発注ナビは、貴社の悩みに寄り添い、最適な外注探し選びのベストパートナーです。
本記事に掲載するシステム会社以外にも、最適な開発会社がご紹介可能です!
ご相談からご紹介までは完全無料。
まずはお気軽に、ご相談ください。 →詳しくはこちら
ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案
■ホームページ制作に関連した記事