韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り1(準備編)

初めてWordPressのテーマを作ってこのブログを作りました。
次回から、さくっと作れるように作り方をメモしておきたいと思います。

1、準備すること

1-1、デザインの作成
最低限、トップページと記事の詳細ページのHTML(index.html)とCSS(style.css)を準備する。

1-2、WordPressをインストール
利用しているサーバーのマニュアルを見ながらインストール。

私はエックスサーバーを利用しているので、WordPress 日本語版 – エックスサーバー マニュアルを見ながらインストールしました。

エックスサーバーは、Webデザインの学校を行ってる時に、WordPressにするならレンタルサーバーは、エックスサーバーが安定していてコスパ的にも良いよと聞いて、それからエックスサーバーにしています。キャンペーンでドメイン取得も無料なのも良いです。



※追記
他にもおすすめのレンタルサーバーについて、記事を書きました。
こちらもぜひ参考にしてください!
WordPressサイトを作る時のおすすめレンタルサーバー & ドメイン

※ファイルのアップロード先を確認
サーバーによってアップロード先のディレクトリ名が違いますが、エックスサーバーの場合は、「public_html」の中にアップロードしていきます。
このブログの場合は、http://watanabemai.com/blog/というURLにしたいので、「public_html」の中に、「blog」というディレクトリを新規作成し、この中にwordpressファイルをアップロードします。

1-3、WordPressの設定
(1)キャッチフレーズを書いておく。管理画面→設定→一般の、「キャッチフレーズ」に、サイトの説明を書く。
(2)パーマリンクを設定しておく。記事のURLの法則を決めます。管理画面→設定→パーマリンク設定で、「カスタム構造」を選択。
カテゴリー名の下に記事タイトルなどが来るURLにしたいところですが、カテゴリーが今後変更する可能性もあるので、記事を書いた「年/月/日/記事のID」のようなリンクになるようにします。
「/%year%/%monthnum%/%day%/%post_id%/」と入力。
(3)日本語サイトの場合、プラグインの「WP Multibyte Patch」を有効化にします。他の「Akismet」や「Hellow Dolly」は削除してもOK。
(4)管理画面→投稿→カテゴリーで、「未分類」というカテゴリーの名前を好きな名前に変更します。そして、必要なカテゴリーを追加しておきます。タグも作成しておきます。

1-4、テーマディレクトリを作成
ダウンロードしたWordPressファイルの中の、wp-content/themes/の中に、ディレクトリを1つ作成します。名前は英数字で好きな名前をつけます。このブログだと、「mainote」という名前にしました。今後作ったファイルはこのディレクトリに保存していきます。

スポンサーリンク

2、index.phpとstyle.phpを作成

index.phpとstyle.phpはWordPressの必須ファイルです。

2-1、まずはとりあえず、index.phpという名前の白紙のファイルを作成します。

2-2、style.cssの一番最初に、テーマ情報を書き加える。
テーマの書き方は以下のとおり。

/*
Theme Name: Mai Note オリジナルテーマ
Author: Mai Watanabe
Author URI: http://watanabemai.com/
Description: ブログ(Mai Note)用のテーマ
Version: 1.0
*/

これで、テーマとして認識されるようになりました。
管理画面→外観→テーマに、追加されているので、有効化します。

150907thema

※「screenshot.png」という300x225pxのスクリーンショットを作り、アップロードすると、プレビューも表示されます。

3、トップページにあたるhome.phpを作成

ブログサイトのトップページは、home.phpで作成します。
3-1、index.htmlをコピーしてhome.phpを作成。

3-2、titleタグを変更。
書き換え前:

<title>Mai Note</title>

書き換え後:

<?php if  ( is_home() ): ?>
  <title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<?php else: ?>
  <title><?php wp_title(''); ?> - <?php bloginfo('name'); ?></title>
<?php endif; ?>

これで、トップページでは「Mai Note – *サイトの説明*」となり、それ以外のページでは、「*記事などのタイトル* – Mai Note」となります。
*サイトの説明*部分は、管理画面→設定→一般の「キャッチフレーズ」のところに書いた文章が入ります。

3-3、cssのパスをテンプレートタグに変更。
書き換え前:

<link rel="stylesheet" type="text/css" href="style.css">

書き換え後:

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>">

bloginfo( ‘stylesheet_url’ )は、テーマのstyle.cssの絶対URLを自動で書き出すテンプレートタグです。
これで、「http://ドメイン名/wp-content/themes/*テーマのフォルダ名*/style.css」と書き出してくれます。

style.css以外のcssファイルやjsファイルを読み込むときは、

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/*ディレクトリ名*/slider.css">

のようになります。

※画像の場合も、

<img src="<?php echo get_template_directory_uri(); ?>/images/*画像ファイル名*">

のように書き換えます。



スポンサーリンク