最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【重要】WordPressのテーマを開発とおすすめのプラグイン

WordPress

【重要】WordPressのテーマを開発とおすすめのプラグイン

WordPressのテーマを開発したことはあるでしょうか？
オリジナルテーマの開発はphpの知識などが必要になります。

今回は、オリジナルテーマを開発するためのローカル環境の設定とhtmlファイルをWordPressに適した形に変える方法を説明します。

また、最後には役に立つおすすめのプラグインも紹介しているので、ぜひ参考にしてください。

環境設定

WordPressオリジナルテーマを制作するには、まずはローカルでの環境を整えることが必要です。

ローカル環境を整えるのにインストールするモノは以下の2つです。

・XAMPPまたはMAMPのインストール
・WordPressのインストール

順番にインストール方法を説明します。

XAMPP・MAMPのインストール

まずは、XAMPP・MAMPについて説明します。

XAMPP・MAMPとは、オフラインの環境でもパソコンでデータベースを利用できるようにするためのソフトウェアです。

このようなソフトウェアを利用することで、サーバーなど契約しなくてもデータベースを使用することができます。

WordPressのオリジナルテーマを制作するには欠かせないソフトウェアです。

XAMPP・MAMPに大きな違いはありません。

使用するOSによって、利用するソフトウェアが違うだけです。

・Windowsを使用している方は、XAMPPを利用する
・Macを利用している方は、MAMPを利用する

まずは、XAMPPのインストール方法を説明します。

XAMPPのインストール

XAMPPのインストールするために、XAMMPのホームページにアクセスします。

XAMMPホームページのYRK:https://www.apachefriends.org/jp/index.html

画面中央下部にある「Windows向けXAMMP」をクリックしてインストールします。

XAMPPインストール

ファイルをダウンロードして設定を進めると設定は終了です。

MAMPのインストール

次にMAMPをインストールする方法について説明します。

MAMPをインストールするためにMAMPのホームページにアクセスします。

MAMPのホームページには「MAMP」と「MAMP Pro」の2種類があるので、注意が必要です。

MAMPインストール

MAMP Proは有料のソフトウェアになります。

このソフトウェアをよく利用するヘビーユーザーの方におすすめです。

初心者の方は、無料で利用できるMAMPがおすすめ。

MAMPの左下に表示されている「DOWNLOAD」をクリック。

インストーラをダウンロードしましょう。

インストーラを展開して、手続きを進めれば環境設定は完了です。

XAMPP・MAMPの設定

AMPP・MAMPをインストールした次は、ソフトウェアの設定をおこないます。

まずは、AMPP・MAMPを起動させて、「設定」をクリック。

MAMP設定

「設定」をクリックすると、「スタート/ストップ・ポート・PHP・Webサーバー」の4つのタブが表示されます。

「スタート/ストップ」　のタブでは、「サーバーを始動・オープンWebStart・MAMP終了時にサーバーを停止」の項目にチェック。

XAMPP設定

次は、ポートの設定をおこないます。

各項目の設定は以下のようにしましょう。

XAMPP設定

・Apacheポート：8888
・Nginxポート:7888
・MySQLポート:8889
・MAMPポートをデフォルトに設定
・WebとMySQLのポートを80と3306に設定

次は、PHPの設定をおこないます。

XAMPP設定

・標準バージョン：7.0.0
・キャッシュ：オフ

次に、Webサーバーの設定をおこないます。

・Webサーバー：Apache

この各設定をおこなえば、設定は終了です。

WordPressのインストール

ソフトウェアのインストールが終わった次は、WordPressのインストールをおこないます。

WordPressのインストールするためにWordPressのホームページにアクセスします。

WordPressホームページのURL:https://ja.wordpress.org/

>WordPressのホームページにアクセスして、画面右上に表示されている「WordPressをダウンロード」をクリックします。

WordPressインストール

すると、以下のような画面に推移するので、最新バージョンのWordPressをインストールします。

現在(2018年7月8日)の最新バージョンは「WordPress4.9.7」です。

XAMPPインストール

zip形式でダウンロードされるので、解凍して保存します。

WordPressのセットアップ

ソフトウェア・WordPressのインストールが完了した次は、オリジナルテーマの開発作業に進みます。

オリジナルテーマの開発は、データベースの作成から始めます。

先ほどインストールしたXAMPP・MAMPを開いてください。

XAMPP・MAMPの中にあるhtdocsのファイルを選択します。

WordPressテーマ

htdocsの中にダウンロードしたWordPressを入れます。

htdocsの中に入れたWordPressのファイルは任意の名前に変更しても大丈夫です。

XAMPP・MAMPの「オープンWebStart」をクリックします。

オープンWebStartをクリックすると、自動的にXAMPP・MAMPのページがブラウザに表示されます。

ブラウザにURLを入力することでアクセスすることも可能です。

URL:http://localhost:8888/MAMP/?language=Japanese

「MySQL」の下に表示されている「phpMyAdmin」をクリック。

WordPressテーマ

クリックすると、データベースを作成する画面に推移します。

データベース作成画面URL:http://localhost:8888/MAMP/index.php?page=phpmyadmin&language=Japanese

タブに表示されている「データベース」をクリック。

「データベースを作成する」という欄があるので、任意のデータベース名をつけて「作成」ボタンをクリックします。

WordPressテーマ

次にブラウザで以下のURLを入力して、WordPressの管理画面にアクセスしましょう。

http://localhost:8888/作成したデータベース名

管理画面にアクセスすると、セットアップ画面が表示されます。

WordPressテーマ

セットアップ画面の各項目はこのように設定しましょう。

・データベース名：phpMyAdminで作成したデータベース名
・ユーザー名：root
・パスワード名：root
・データベースのホスト名：localhost
テーブル接頭辞：wp_

このように設定したら下に表示されている「送信」ボタンをクリック。

「この部分のインストールは無事完了しました・・・。」と表示されたら、左下に表示されている「インストール実行」ボタンをクリックします。

次に、このようなWordPressのインストール画面がされます。

WordPressテーマ

・サイトのタイトル：任意のサイトのタイトル名(後で変更することも可能)
・ユーザー名：任意のユーザー名
・パスワード：任意のパスワード(入力欄が2つあるので、2つとも同じパスワードを入力します。)
・メールアドレス：使用するメールアドレス

入力が終わったら「WordPressをインストール」をクリックします。

オリジナルテーマを認識させる

WordPressのセットアップが完了したあとは、テーマの認識させます。

テーマを認識させるためには、「wp-content」の中にある「themes」の中にフォルダを作成します。(ファイル名は任意で大丈夫です。)

フォルダの中に「index.php」と「style.css」を入れます。

index.phpとstyle.cssをフォルダの中に入れることで、テーマ認識させることが可能です。

実際にテーマが認識されていることは、WordPressの管理画面の「外観」→「テーマ」から確認できます。

テーマが認識されていることを確認できたら、スタイルシートに必要なコメントを記述しましょう。

スタイルシートに記述するコメントは以下のような内容です。

/*
Theme Name：　テーマの名前
Theme URI：　テーマの詳細情報が掲載されているWEBサイトのURL
Author：　テーマ開発者の名前または組織の名前
Author URI：　テーマ開発者の名前または組織のURL
Description：　テーマの概要説明
License：　テーマのライセンス
License URI：　テーマのライセンスURL
Tags：　タグフォルダを使用して、テーマを探すための単語もしくはフレーズ
Text Domain：　翻訳用のテキストドメインの文字列
Version：　バージョンの説明
*/

全て記述する必要はありませんが以下の項目は記述するようにしましょう。

/*
Theme Name：　テーマの名前
Author：　テーマ開発者の名前または組織の名前
Description：　テーマの概要説明
Version：　バージョンの説明
*/

次に、スタイルシートをフックに読み込みましょう。

フックを利用してスタイルシートを読み込むためには、「functions.php」が必要です。

まずは、functions.phpを作成します。

functions.phpの中には以下のコードを記述します。

function my_theme_style()
{
wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_style');

フックを利用してスタイルシートを読み込むためには、wp_enqueue_style()関数が必要です。

wp_enqueue_style()関数の中には、CSSを識別するためのハンドル名と使用するスタイルシートまでのパスを記述します。

このように記述したあとは、スタイルシートが適用されていることを確認しましょう。

htmlをワードプレスに適した形に変える

ここからは、htmlで形成されたファイルをワードプレスに適した形に変えます。

まずは、言語属性から変更しましょう。

indexのファイル内に「html lang=”ja”」記載されているされている場合はこのような内容を記述します。

Before

<!DOCTYPE html>
<html lang="ja">

After

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>

「language_attributes();」を使用することで、WordPressの設定に合わせて自動的に言語属性が出力されます。

次に、headタグの中にあるcharsetの属性もWordPressに適した記述に変更します。

「　meta charset=”UTF-8″」の「”UTF-8″」の部分を「?php bloginfo(‘charset’); ?」に書き換えることが必要です。

Before

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
 <meta charset="UTF-8">

After

<!DOCTYPE HTML>
 <meta charset="<?php bloginfo('charset'); ?>">

「”UTF-8″」の部分を「?php bloginfo(‘charset’); ?」にすることでWordPressの文字エンコーディングを自動的に出力されます。

自動的に文字エンコーディングを出力することで、文字化けを防ぐことが可能です。

これらと同じようにタイトルタグもフックに登録することで、自動的に処理をおこなうことができます。

フックに登録するためには「functions.php」にコードを追記します。

function my_theme_setup(){
 add_theme_support('title-tag');
}
add_action('after_setup_theme','my_theme_setup');

また、サイトタイトル・キャッチフレーズも自動的に出力することも可能です。

「index」にサイトタイトル・キャッチフレーズを記述している場合は、自動的に出力する形式に変えましょう。

Before

<p class="site-title">サイトタイトル</p>
<p class="site-subtitle">キャッチフレーズ</p>

After

<p class="site-title"><?php bloginfo('name'); ?></p>
<p class="site-subtitle"><?php bloginfo('description'); ?></p>

変更点は、以下の2つです。

サイトタイトル→「?php bloginfo(‘name’); ?」
キャッチフレーズ→「?php bloginfo(‘description’); ?」

このように記述を変えましょう。

記事一覧を表示させる

WordPressはコンテンツ管理を目的としたCMSです。

なので、WordPressを使用するWEBサイトの多くは、コンテンツを増やすと思います。

以下のコードは、記事一覧を表示するためのphpのコードです。

<?php if (have_posts()) : ?>・・・1

//ここは投稿がある場合、ループする前に処理されます。

 <?php while (have_posts()) : ?>・・・2
  <?php the_post(); ?>・・・3

　　　//この部分は繰り返し処理されます。

 <?php endwhile; ?>・・・4

　　//ここは投稿がある場合、ループ後に処理されます。

<?php else : ?>・・・5

//この部分は投稿がない場合のみに処理されます。

<?php endif; ?>・・・6

1.「if(have_posts()):」は、have_posts()の関数を使用したphpのif文です。

have_posts()は、真偽値を返す関数です。

・投稿がある場合は、true(真)を返す
・投稿がない場合は、false(偽)を返す

2.「while (have_posts()」は、whileの文は記述した条件がtrue(真)である限り、endwhileまでコードを繰り返し処理します。

表示する記事数は、WordPressの設定によって違います。

デフォルトの設定では、表示数が「10」です。

表示数は、WordPressの設定で変更することが可能です。

3.「the_post();」は、ループ内で参照する投稿を順番にセットするWordPressの関数です。

この関数をループ内で処理することで、投稿の各項目のデータを取得できます。

4.「endwhile;」は、ループの処理を示すコードです。

5.「　else:」は、条件がfalse(偽)の時に処理をするコードになります。

6.「endif;」は、コードの一番最後に記述します。

このコードの記述が抜けると、エラーが発生するので注意してください。

記事のタイトルは、このように記述します。

Before

<a href="single.html"><p class="article-title">記事のタイトル</p></a>

After

<a href="single.html"><p class="article-title"><?php the_title(); ?></p></a>

個別ページにいどるするためには、「?php the_permalink(); ?」を記述します。

Before

<a href="single.html"><p class="article-title"><?php the_title(); ?></p></a>

After

<a href="<?php the_permalink(); ?>"><p class="article-title"><?php the_title(); ?></p></a>

カテゴリー・タグの記述も書き換えが必要です。

Before

<p class="category"><a href="category.html">カテゴリー</a></p>
<p class="tag"><a href="tag.html">タグ</a></p>

After

<p class="category"><?php the_category( ',' ); ?></p>
<p class="tag"><?php the_tags(); ?></p>

また、登校日は「get_the_date()」を使用することで取得することが可能です。

Before

<time class="date">◯◯年◯◯月◯◯日</time>

Before

<time class="date" datetime="<?php echo get_the_date(DATE_W3C); ?>">◯◯年◯◯月◯◯日</time>

ナビゲーションメニューを利用する

ナビゲーションメニューを利用するには、「register_nav_menu()」もしくは「register_nav_menus()」を記述します。

両者の違いは、登録するメニューが1つ・複数の違いです。

汎用性の高いコードは、「register_nav_menus()」です。

「register_nav_menus()」をfunctions.phpに記述します。

function my_theme_setup(){
　　　register_nav_menus();
}

また、「register_nav_menus()」に引数を与えます。

function my_theme_setup(){
　　　register_nav_menus(array('global' => 'Global Menu'));
}

「外観」→「メニュー」から「Global Menu」にチェックを入れて「メニューを保存」クリックします。

WordPressテーマ

ヘッダー・フッターを分割する

index.phpに記述されているヘッダー・フッターを分割して保存しましょう。

まずは、「header.php」と「footer.php」のファイルを作成します。

index.phpに記述されている「!DOCTYPE HTML」から「/header」までをheader.phpに転記します。

Before

<!DOCTYPE HTML>
(中略)
</header>

After

<?php get_header(); ?>

「?php get_header(); ?」を記述することでheader.phpの内容を読み込みます。

フッターは、「footer」から「/html」でをfooter.phpに転記します。

Before

<footer>
(中略)
</html>

After

<?php get_footer(); ?>

「?php get_footer(); ?」を記述することでfooter.phpの内容を読み込むことが可能です。

WordPressを活用する

ここまでindex.htmlをWordPressに適した形に直す作業をおこないました。

ここからは、WordPressを活用するためのプラグインなどを紹介します。

SEO対策

SEO対策するためのおすすめプラグイン2つです。

・All in One SEO Pack
・Yoast SEO

All in One SEO Pack

WordPressプラグイン
「All in One SEO Pack」は、初心者でも簡単にSEO対策をおこなうことができるプラグインです。

具体的には、いかのようなことが設定できます。

・検索エンジンにインデックスされたくない記事を設定できる
・Google Analyticsの解析コードの設定ができる
・Google Search Consoleの解析コードを設定できる
・個別記事にメタキーワード、カテゴリー、タグを設定できる

All in One SEO PackサイトURL：https://ja.wordpress.org/plugins/all-in-one-seo-pack/

Yoast SEO

WordPressプラグイン
All in One SEO Packと比べて、細かく設定できるのがYoast SEOです。

とても高機能ですが無料で使用することができます。

細かく設定できるため、初心者よりもWordPressやSEOに関して知識のある玄人におすすめのプラグインです。

・パンくずリストの表示機能がある
・有料版のプラグインがあり、SEOの拡張性が高くなる
・XMLサイトマップを作成できる
・ソーシャルメディア用のメタタグを作成できる

Yoast SEOの機能や使い方、デメリットもまとめた記事を書いていますので関心のある方はそちらもご覧ください。→Yoast SEOの特徴と使い方

目次の設定

WordPressプラグイン
目次を設定するのにおすすめのプラグインは「Table of Contents Plus」です。

Table of Contents Plusは、記事や固定ページに目次を自動生成できます。

Table of Contents Plusの設定は、サイドバーの「設定」でおこないます。

WordPressプラグイン

設定できる項目はこのようになっています。

位置・・・最初の見出しの前(デフォルト)、最初の見出しの後、上、下のいづれかに表示できます
表示条件・・・設定した見出しよりも多いときに表示される
以下のコンテンツタイプを自動挿入・・・目次を自動挿入する記事の種類を選択できます
見出しテキスト・・・目次のタイトルを設定できます
階層表示・・・h2、h3などを階層化して表示します
番号振り・・・目次の項目に自動的に番号を付与します
横幅・・・横幅を指定できます(デフォルトでは自動に設定されています)
回り込み・・・回り込みを設定できます(デフォルトではなし、左、右のいづれかで設定できます)
文字サイズ・・・文字のサイズを指定できます
プレゼンテーション・・・目次のデザインを指定できます(デザインはカスタムすることも可能です)

Table of Contents PlusサイトURL:https://ja.wordpress.org/plugins/table-of-contents-plus/

画像圧縮

WordPressプラグイン
画像を圧縮して軽量化することで、表示速度を上げることが可能です。

写真を多く掲載すると、どうしても表示速度が遅くなります。

EWWW Image Optimizerを導入することで、自動的に画像を最適化されます。

とても役に立つプラグインなので、導入するのがおすすめです。

EWWW Image OptimizerサイトURL:https://ja.wordpress.org/plugins/ewww-image-optimizer/

まとめ

いかがでしたか？

今回はhtmlをWordPressに適した形にする方法とおすすめのプラグインを紹介しました。

WordPressはコンテンツを管理するのに、とても便利なCMSです。

ぜひ使用してください。