PAGE TOP

WordPressを導入してまずやること(完全自作のテーマを作る)

Wordpressで完全自作テーマを作る

WordPressはオープンソースのブログアプリケーションとして多くの支持があります。本体の機能だけでなく世界中の開発者による無償のプラグインによって、よほど複雑な構造のサイトでなければほとんどのWebサイト制作で利用できる、とても優れたものです。

有志による多数の無料テーマファイルが公開されていますが、それらのテーマをカスタマイズしたい時は構造を理解したりCSSをチェックしたりと少し面倒です。 完全オリジナルのテーマを作るとなると作業工数としては当然ボリュームが出てくるのですが、自分で制作しているので理解も深く、後々のメンテナンス効率も上がりますね。

完全オリジナルテーマを制作する上で最初の一連の作業を、備忘録としてまとめておきます。

1.テーマファイルの準備

まずはテーマファイルを一式アップロードします。WordPressを構成する上で必要なファイルをFTPでアップロードします。
以下のファイルをフォルダにひとまとめにします。(フォルダ名はテーマ名※半角英数字)

  • header.php・・・ヘッダー部分 DTDやhead
  • index.php・・・ブログ記事を読み込むファイル
  • single.php・・・単一投稿記事
  • page.php・・・固定ページ
  • category.php・・・カテゴリーページ
  • tag.php・・・タグページ
  • archive.php・・・記事一覧ページ
  • comments.php・・・コメント部分
  • sidebar.php・・・サイドバー
  • footer.php・・・フッター部分
  • 404.php・・・404ページ
  • functions.php・・・関数の設定
  • style.css・・・cssファイル
  • screenshot.jpg・・・テーマのスクリーンショット
  • imgフォルダ・・・画像を格納するフォルダ
  • jsフォルダ・・・Javascript、jQueryを格納するフォルダ
  • cssフォルダ・・・外部cssを格納するフォルダ

アップロードする位置は../wp-content/themes/
スクリーンショットは、横300px縦225pxです。
また、style.cssの最上部に以下を記述することで、テーマファイルとして認識させます。
※これを書かないとテーマとして認識されません!

/*
theme name: Sample Site (サイト名)
theme uri: http://www.example.com/ (URL)
description: サンプルサイト (サイトの説明)
Author: Web Design & Create SMILEWORKS (管理者の名前)
version:1.0 (バージョン)
*/

2.パーマリンクの設定

デフォルトのパーマリンクは、http://www.example.com/?p=123という形式で、URLに?マークが付いています。これはSEO的にもよろしくないと言われていますし、そもそもURLから内容がわかりにくいです。
パーマリンクは制作するサイトの構造にもよりますが、一般的には「http://ドメイン/カテゴリー/記事ID(スラッグ)」などがシンプルでわかりやすいと思っています。

管理画面の「設定」→「パーマリンク設定」から、「カスタム構造」にチェックマークを入れ、

/%category%/%post_id%
と設定します。

%post_name%を使うと記事タイトルが日本語の場合、そのまま日本語のURLを使うことができるのですが、実際は文字コードに変換されていてURLが長くなってしまいます。直リンクを貼られた時などにコードが美しくない!という観点から、自分は使いません。SEO的にも効果は薄いとの情報もありましたので、美観を優先します。


3.functions.phpで関数の設定

WordPressには標準でメニューやブログのサイドバーでよく使うカレンダー、最近の投稿、月別アーカイブなどのウィジェットが用意されています。
自作テーマを使う場合はこれらを有効にする設定をfunctions.phpに記述する必要があります。

グローバルナビやサイドメニューなどで使うカスタムメニューという項目を追加します。

functions.phpに以下を記載し、

//カスタムメニュー
register_nav_menus(array(
'navigation' => 'ナビゲーション'
));

テンプレートファイルのメニューを表示したい場所に

<?php wp_nav_menu(array(
'theme_location') => 'navigation'
)); ?>

と記述します。

サイドバーウィジェットを追加します。

functions.phpに以下を記述

//ウィジェット
register_sidebar();

ウィジェットの設定は、管理画面の「外観>ウィジェット」で行います。

WordPress特有の要らないヘッダメタ情報を非表示にする

ページの読み込みを速くしたい、セキュリティ的にもSEO的にも良くない、WordPressが自動的に出力するヘッダメタ情報で、要らないものは非表示にしてしまいます。
後々ソースコードをチェックする時も見やすくなります。サーバーへの負荷軽減にもなるとも。

functions.phpに記述

//ヘッダー整理
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link',10);
remove_action('wp_head', 'start_post_rel_link',10);
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head',10);
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'feed_links_extra', 3);

wp_generator
wordpressのバージョンを表示しています。入っていても入っていなくてもいいのですが、少しでもコードを簡素化したいので削除します。

wlwmanifest_link
投稿をするときにWindows Live Writerというアプリケーションを使っている場合に必要。普通に管理画面から投稿する場合には不要です。

rsd_link
こちらも同じく、外部アプリケーションから投稿する場合に必要な記述です。管理画面で作業する場合には不要です。

index_rel_link
parent_post_rel_link
start_post_rel_link
adjacent_posts_rel_link

ページネーションに関するメタ情報です。index, start, up, prev, nextなど、ページネーションを表すメタ情報を削除する記述。
ページネーションとは丁付・ページ割りのことですが、異なる複数の投稿を検索エンジンに1つの記事として認識されてしまうことを防ぎたい思惑があり、他にcanonicalというmeta情報でページが独立していることを宣言していますが、保険の意味で削除しています。

wp_shortlink_wp_head
短縮URLを表示するもの。私的には短縮URLはブラクラなどが怖いのでなかなか踏めません。こちらも削除。

feed_links_extra
「その他」のフィードへのリンクを表示するもの。

管理バーを非表示にする

version3.1から導入されたログイン状態でサイトを見た時に表示される管理バー。管理画面のプロフィール設定から「表示/非表示」の設定が出来ますが、複数人で投稿できる会員制のようなサイトをつくった時にそれぞれ管理バーを消す作業を行うのは面倒なので、最初から非表示にしてしまう一文です。

//管理バー非表示
add_filter( 'show_admin_bar', '__return_false' );

functions.phpの初期設定としては以上です。

jQueryの準備

Webページの「ふるまい」を演出してくれる軽快で便利なjQuery。WordPressはデフォルトでjQueryが用意されているのでそれを呼び出してもいいのですが、コードが長くなるのとphp記述なので、
一般的な<script>タグで囲む記述のほうが面倒がありません。

jQuery本体はCDN(Contents Delivery Network)で

jQuery本家サイトで最新版のCDNが公開されています。
migrateは本体の古いバージョンとの補完プログラムですので合わせて読み込ませます。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

フックの挿入

WordPressは世界中の開発者たちによる無償のプラグインが、それこそiPhoneアプリ並に多数公開されています。これらの一部は、ページ内のフック情報を読み込んで動作するものがあります。

header.phpの‹/head›直前に、

<?php wp_header(); ?>

footer.phpの‹/body›直前に、

<?php wp_footer(); ?>
の記述を必ず入れます。

これを記述し忘れで「プラグインが動作しない・・・?なぜだー・・・???」と小一時間悩んだことがありますので、忘れないように最初に書いておきましょう。


初期導入プラグイン

プラグインについては、それぞれ一つづつ記事で紹介しますが、とにかく最初に入れておきたいプラグインは、

PS Disable Auto Formattingです。

WordPressの記事投稿エリアは、BRタグによる連続改行ができない仕様ですので、このプラグインによってそれを可能にします。インストールして有効化すれば、なんの設定も要らず連続改行が可能になります。



以上が、WordPressを導入して完全自作テーマを作る場合にまずやることでした。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •