WordPressで自作テーマを作ってブログ運営をしよう Vol.2

Hello World!!
杉山です。

今回はWordPress自作テーマ作成シリーズ第二回目を進めていきたいと思います。

第一回目では、あなたのパソコンにローカル環境を開発して、そしてWordPressのダウンロードおよびインストールを行ったとおもいます。

これで、いわば自作テーマをつくる環境が整ったわけですので、いよいよ自作テーマを実際に作っていく作業に移っていきましょう。

この第二回目ですることは以下の通りです。

  • 自作テーマのフォルダを作成
  • WordPress上に自作テーマをアップロード

では、さっそく始めていきましょう。

自作テーマのフォルダを作成

まず、あなたが今回作成した自作テーマを構成するファイルたちを格納するフォルダを作らなくてはいけませんので、そちらの作成から行いましょう。

まずは、デスクトップ上でもどこでもいいのですが、フォルダの作成を行いましょう。

名前は、あなたの自作テーマの名前をつけてあげてください。

私は、今回「self」というテーマにしました。

フォルダを作りましたら、その中にファイルを作成していきましょう。

拡張子を、「php」と「css」にして以下のように作ってみましょう。


WordPressの場合は、一般的なサイト作成の流れのように「index」のファイルだけでは、構成しません。

様々なパートによって個別にコーディングしていく必要があるので、このようにファイルが多くなってしまいます。

では、一つずつどんな時に使うのかを理解しておきましょう。

style.css

こちらは、言わずと知れたサイトをデザインするためのファイルです。
プログラミングをかじっている人には馴染みの深いファイルですね。

single.php

こちらは、ブログで投稿したあとの記事を表示するためのファイルになります。

今、見ていただいているこの記事もsingle.phpによって表示されています。

sidebar.php

これは、サイドバーを表示するためのファイルになります。

今見ていただいていると、私のブログでいうと、記事の右側にプロフィールや、最新の記事やらが並んでいるバーです。

こちらは、このファイルによって構成されています。

page.php

こちらは、固定ページの表示を構成するファイルになります。

私のブログでいうと、お問い合わせフォームだったり、プロフィールページなんかは、page.phpで作られております。

index.php

こちらは、簡単に言うとトップページを表示させるファイルです。

ヘッダーがあって、ヘッダー画像があって、記事の羅列があって、サイドバーがあって、そして、下にはフッターがあってのあのページです。

WordPressでトップページの表示方法は「index」だけでなく、「home」や「front-page」なんかもありますが、今回はとりあえず「index」でいきます。

header.php

こちらは、ページ上のヘッダーを表すファイルになります。

基本的に全ページに呼び寄せる為、最も大切なファイルになります。

functions.php

すこし難しいですが、関数の定義をしたり、新たに機能を追加したりする、上級者向けのファイルになります。

今回も適時触れていきますが、すべてを理解することは難しいと思うので、ざっくり理解くらいで問題ないと思います。

footer.php

こちらも、全ページに共通するフッターを表示させるファイルになります。

私のブログにはフッターがありませんが。今回のシリーズでは作っていきます。

以上が、それぞれのファイルに関する説明になります。

では、一通りファイルを作り終えましたら、さっそく書いていきましょう。

まずは、style.cssに自分のテーマの情報を作成していきましょう。

syyle.cssをテキストエディタをしようして書いていきましょう。

まず、一番初めに下記のように書いていきましょう

ここに入力する項目は、テーマをインストールしたときに表示される画面の情報になります。

上記のようなコードであれば、上記のような画面になりますので。

あなた、オリジナルの情報を書いてください。

では、次にfunctions.phpに初期設定の記述をしていきましょう。

あまり深く考えずに、下記のコードをfunctions.phpにコピペしてください。

これらは、サイトのタイトルをヘッダー内に生成したり、HTMLでマークアップしますよっていうのを書いたり、ブログでアイキャッチ画像使いますよっていうことを書いています。

まあ、これは呪文みたいなもので覚えておきましょう。

では、つづいてはheader.phpの記述をしていきましょう。

今回は、Bootstrapのようなフレームワークは使用しません。使いなれている人はもちろんいれちゃって大丈夫です。

cssの読み込みもphpで記述していきましょう。

Fontawasomeもよく使うので、入れておきましょう。

あとは…レスポンシブの為の記述も行いましょう。

それらを書いたら以下のような感じになると思います。

header.phpの記述が終わったら、次にindex.phpの記述を行っていきましょう。

WordPressには、独自で組み込まれた関数が存在し、それらは非常に便利です。

できることも無限大ですが、覚えるのがなかなか大変です。

でも、シンプルなブログでしたらそこまで関数の深い知識も必要ありませんので大丈夫です。

下記のように、index.phpに記述してください。

ワードプレス独自の関数が、ここで3つ登場しております。

<?php get_header(); ?> と<?php get_sidebar(); ?> と<?php get_footer(); ?>ですね。

これらは、読んで字のごとくでとてもわかりやすい関数です。

get_header() と書けば、自動的にそこにheader.phpを表示させてくれます。

あとも、同じです。

get_sidebar() はsidebar.phpを表示させ。
get_footer() はfooter.phpを表示させてくれます。

この関数のおかげで、短いコードで書くことができます。

そして、このワードプレスにはブログを作成するために呼び寄せたい情報を呼びよすための関数がほとんど揃っているので、けっこう簡単に記述することができます。

では、上記通りの記述が終わりましたら、いよいよアップロードしていきましょう。

WordPress上に自作テーマをアップロード

自作テーマのアップロードの方法は2種類あります。

  • 直接、入れ込む
  • ダッシュボード画面からインストールする

どちらでも、いいのですが。直接入れ込む際は、ローカル環境ではなく、本当のサーバー上にアップした場合は、FTPソフトなどが必要になります。

では、一つずつやりかたを見ていきましょう

直接、入れ込む

こちらの方法はとても簡単ですので、ローカルで作業する場合は、この方法をお勧めいたします。

前回の記事で、Windowsの方もMacの方も「htdocs」というフォルダ内にワードプレス本体のフォルダを入れたのを覚えていますでしょうか?

忘れた方はおさらいしましょう。

その「htdocs」内に入っているwordpressフォルダの中に入りましょう。

入るとこのような画面になると思います。

こちらWindowsの画面ですが、macの方も同じです。

そこから、wp-contentというフォルダに入ります。

その中のthemesというフォルダがあると思います。

そのthemesのフォルダに、先ほど作成してきた自作テーマのフォルダを直接いれこんでください。

これで、オッケーです!


ダッシュボード画面からインストールする

こちらは、ダッシュボード画面からインストールする方法です。

まずは、先ほど作った自作テーマのフォルダをzip形式に圧縮しましょう。

それが完了したら、ダッシュボード画面にログインしてみましょう。

ローカル環境のログイン画面に移動する方法はWindowsとMacで別々になっています。

ブラウザで下記のようにURLを直接書いてください。

Windowsの方
http://localhost/wordpress/wp-login.php

Macの方
http://localhost:8888/wordpress/wp-login.php

そうしましたら、ログイン画面にいきますのでそちらでご自身で設定した「ユーザー名」と「パスワード」を入力してください。

成功すれば、下記のような画面になるはずです。

この画面をダッシュボード画面といいます。

そして、順番に下記の通りすすめてください。

そして、このような画面が表示されれば成功です。

これで、アップロードが完了です。

今回はここまでです。お疲れさまでした。