トップページ > オリジナルテーマを1から作る

01.オリジナルテーマとは? HTMLをWordPressテーマ化

2013年06月21日 Category >> オリジナルテーマ作成

WordPressのテーマを作るとはどういう事なのかを把握する WordPressのテーマを作るということは、インデックスページや個別ページ(投稿、固定)、アーカイブページ(カテゴリー、タグ、月別等)をどう出力するか決めているテンプレートを作るという事。テンプレート等を全てまとめて「テーマ」と呼ぶ。 まず、テーマの元となる「HTMLとCSS」による静的ページを用意 イラストレーターもしくはPhotoShopを使い、デザインを作った後、HTMLとCSSによるスタティックページを用意する。 インデッ

2013年09月06日 追記・変更

この記事を読む

02.WordPressテーマの動作を知れば、全体像が見えてくる

2013年06月21日 Category >> オリジナルテーマ作成

WordPressのテーマは、どういった動作をしているのかを知る WordPressのテーマは、ホームページのヘッダーやサイドバー、ループ、フッターといったパーツを別ファイルに分割して、そのパーツを各ページ用のテンプレートファイルで呼び出している。 例)index.phpの場合 また、index.php、style.css の2ファイルがあれば、テーマとしては動かす事が出来る。 その理由は、テーマファイルの読み込みには優先順位がつけられているからだ。 ページの表示 優先順位(高い→低い) トップ

2013年09月06日 追記・変更

この記事を読む

03.まずはスタイルシートの設定と、index.phpの作成をする。

2013年06月24日 Category >> オリジナルテーマ作成

オリジナルテーマはstyle.cssとindex.phpが最低限あれば動く まずは、テーマ用のstyle.cssとindex.phpの2つのファイルを準備する事から始める。 WordPressは、テーマディレクトリ内にテーマ宣言されたstyle.cssとindex.phpが存在すると、テーマとして認識する。 実際にやってみる index.htmlをindex.phpに変更 こちらからサンプルのHTMLファイルをダウンロードして欲しい。ダウンロード後、index.htmlのファイル名をindex.

2013年09月06日 追記・変更

この記事を読む

04.現在のテンプレート表示内容と、テーマ適用後の差を知る

2013年06月24日 Category >> オリジナルテーマ作成

まずはテーマ用のindex.phpの表示内容を確認しよう 現在のindex.phpをローカルで閲覧すると、下記のように表示される。 今回は、このページをWordPressのタグを使って、サイト内容を変えていく作業となる。 静的サイトをWordPressの動的サイトに対応させる。 管理画面の外観→テーマでこのテーマを適用してみよう このテーマファイルを適用させて、サイトを表示させてみよう。 そうすると下記のように「スタイルシート」や「画像」が読み込めていない状態となっている。 ページのソースを確認

2013年09月06日 追記・変更

この記事を読む

05.index.phpの共有部分をファイル分割してインクルードする

2013年06月24日 Category >> オリジナルテーマ作成

他ファイルで呼び出す予定の共有部分を分割してファイル保存 ヘッダー、サイドバー、ループ、フッターは、index.php以外のページテンプレートで呼び出したいため、パーツ毎に切り取りそれぞれ、header.php、sidebar.php、loop.php、footer.phpというファイル名で保存していく。 index.phpに各パーツを読み込ませる インクルード(inclube)は、読み出しという事。 php構文でinclude文というものが存在していて、役割はファイルの読み出し。 本来であれば

2013年09月06日 追記・変更

この記事を読む

06.HTMLタグや、WordPressで出力したい情報を置き換える

2013年06月24日 Category >> オリジナルテーマ作成

各パーツファイルの中身を編集していこう ファイル分割が完了したと思うので、それでは次にそれぞれのファイルの中身を編集していく。 今現在の状態では、まだWordPressの情報を出力出来ていない。 前回作成した、header.php、loop.php、sidebar.php、footer.phpを編集していこう。 サイト名をWordPressで設定したサイト名にWordPressテンプレートタグを使用して書き換えていこう。 テンプレートタグ全てを覚える必要はない。どのタグを使うかを把握していれば問

2013年09月06日 追記・変更

この記事を読む

07.最後にプラグインに対応させるためにWordPressタグを記述

2013年06月24日 Category >> オリジナルテーマ作成

最後にプラグインに対応させるための記述を追加 </head>の直前に入れる <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> <?php wp_head(); ?> <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> はcomment-rep

2013年09月06日 追記・変更

この記事を読む

08.index.phpテンプレートを更にカスタマイズしていく

2013年06月25日 Category >> オリジナルテーマ作成

はじめに 前回までで、ひとまず最低限サイトを表示させるためのHTMLファイルから、index.phpテンプレートへの製作が完了した。 しかし、現在の状態だと、例えば初期設定の1ページに10ページ表示の場合などは、10ページ以降が表示されない。 WordPressでは自動的に「次のページ」や「前ページ」を生成してくれるので、「次ページと、前ページへのリンク」を張る事で、ページ送りが可能になる。 また、サイドバーをヴィジェット対応させる事で、管理画面で表示したいヴィジェットを登録することで、サイドバ

2013年09月06日 追記・変更

この記事を読む

09.sidebar.phpをウィジェット対応させる

2013年06月25日 Category >> オリジナルテーマ作成

サイドバーに表示させるウィジェットを管理画面から追加編集出来るように 今度は少し作業が多くなる。 やる内容としては、新規ファイル「functions.php」にヴィジェット用の関数を作成して、それを「sidebar.php」で呼び出して表示させる。そのため、まずはfunctions.phpから作成をしよう。 functions.phpを新規ファイルとして作成して、下記を記述 これで管理画面からウィジェットの追加・編集が可能となる。 このfunctions.phpにて「関数の作成」を行っている。

2013年09月06日 追記・変更

この記事を読む

10.投稿と固定ページ用のテンプレートを作る準備

2013年06月25日 Category >> オリジナルテーマ作成

index.phpを複製(コピー)して、投稿と固定ページ用のテンプレートを作る 今回は、投稿と、固定ページと、メインページで表示を変えたいので、それぞれ投稿と固定ページ用のテンプレートファイルを用意する。 何度も確認になるが、あくまでページ毎の表示を変えたいから作るので、必ず作る必要があるわけではない。 投稿と固定ページでどう表示を変えたいかを考える いきなり作るのではなく、まずどういう表示にするかを考えた後に追加したい機能を追加していく。機能の追加自体は、WordPressテンプレートタグや、

2013年09月06日 追記・変更

この記事を読む