1つ前の記事:(1)HTML上のどこを自由に編集できるようにするかを考える。

弊社の無料お試し環境を利用してこの記事をご利用になっている方は、テンプレートのフォルダに今回の開始状態を「step2」、終わった状態を「step2-fine」としてセットしてありますので参考にして下さい。

entry2_img5

今日から本格的にサイトの作成を始めていきたいと思います。先ず、作業をしていくため必要な基本的な設定を行っていきます。

トップページのページを作成する。

WordPressでは投稿と固定ページという2種類の編集可能なページの仕組みを利用してサイトを構築してゆくことができます。

entry1_img5

WordPressの管理画面にログインしてみてください。メニューの上の方に「投稿」「固定ページ」と言う項目があります。(「メディア」や「コメント」は今回は触れません、別で説明するので今は無視して下さい)

【POINT】
この投稿と固定ページの2つがWordPressの中で編集可能なページを作る2つの方法になります。
投稿は、日記のように、投稿がどんどん増えていくものに利用します。
固定ページとは、今回のサイトでは「トップページ」、「団体について」、「お問合せ」のように、1つのページで同じ種類の投稿がどんどん増えていくことのないものに利用します。

今作業しているページは、サイトのトップページになりますので、日記のように増えていくことはありません。そこで、トップ用の固定ページを1つ作成し、そこにトップページに関する内容を登録するようにします。言葉ではわかりにくいと思うので実際にトップページを作成してセットしてみます。見た目はまだ何も変更していないのですが、トップページの表示内容が変わることを確認して下さい。

先ずは、トップページ用の固定ページを作成します。

次に、作成した固定ページをサイトのトップページに設定します。

HTMLをWordPressの新しいテンプレートとして設置する

HTMLをテンプレートとして構築していくために、WordPress上に今回のテーマ用の置き場所を作成し、ダウンロードしてきたHTMLファイルを設置していきます。

弊社の無料環境をご利用の方は、すでにフォルダとファイルが設置されていますので、そちらをご利用下さい。

その他の方は、http://opensourcetemplates.orgへアクセスし、今回利用するHTMLのDOWNLOADをクリックしファイルをダウンロードします。

entry2_img1

HTMLはZIPファイルになっています、任意の場所に保存し、解凍しておきましょう。WordPressの設置されているフォルダを開きフォルダに「htdocs/wp-content/themes/study」というフォルダを作成します。

このフォルダの中に、上で取得したファイルやフォルダを設置して下さい。

entry2_img2

テーマフォルダに最低限必要なファイルを用意する。

WordPressでは「htdocs/wp-content/themes」フォルダの下の1つのフォルダに1つのテーマを作成保存できるようになっています。各テーマのフォルダには最低限必要なファイルが決まっていて、空でもいいのでそれを設置する必要があります。

必要なファイルは以下の3つになります。

  • index.php
  • style.css
  • functions.php

この他に、無くても動作しますがscreenshot.pngという画像ファイルがあります。(別途ご説明しますので今はスルーして下さい)

「.php」というファイルの拡張子を初めて見る方もいるかもしれません。別で説明を記載してゆきますが、ただのHTMLではなく、「PHPプログラムを内包させたファイル」と言う意味になります。

前項で作成したフォルダに、上の3つのファイルを作成したテーマフォルダ「htdocs/wp-content/themes/study」に作成して下さい。中身は空で構いません。

entry2_img4

テーマの名称などを記入し、テーマがサイトで表示に利用されるようにする。

管理画面上でテーマを選択する際にわかるようにするための名称などの情報を書いておく必要があります。style.cssファイルに記載するとWordPressがその情報を読み込んでくれます。いろいろな情報が書けるのですが今回は最低限以下をstyle.cssの頭に記載して下さい。(行の頭にスペースなどを入れずにこのまま記載して下さい)

※今回は空白にしている箇所も、テーマをネットに公開する場合などは内容を記述する必要があります。他にも多言語対応するための値など埋め込めますが、ここではスルーします。

【POINT】
日本語には文字コードというものがあります。ややこしいことは置いておいて、普段HTMLを作成する時にSJIS(シフトJIS)やEUC-JPで作成してきた人も多いと思います。ですが、WordPressのテーマファイルはUTF-8というコードを選択肢て下さい。

テーマの環境を用意しましたが、まだ、サイトを見ても、初期のテーマのままで、用意したものは利用されていません。そこで、WordPressの管理画面から、前項で作成したテーマを利用してサイト表示されるように設定を行います。

最も、index.phpなどは中身が空なので、真っ白なページが表示されるようになるだけになってしまうので、切り替わったことを確認するためにindex.phpの中に以下の内容を記述しておいて下さい。

それでは実際にファイルを編集し、管理画面にログインして、設定を行ってみます。

 

次回からは、実際に各箇所のテンプレートの作成を進めていきます。

 

前の記事【(1)サイト上のどこを自由に編集できるようにするかを考える。】

次の記事【(3)パスの書き方とPHP利用の第一歩。】

この記事の目次はこちら