WordPressオリジナルテーマを作ってみよう シンプルなブログサイト
こんにちは、koheiです。
WordPressには、色んなテーマファイルをインストールでき、自分好みのサイトにカスタマイズできますが、今日はそのテーマファイルを1から自分で作ってみようという記事です。
今回の記事では、以下のような必要な機能だけに絞ったシンプルなブログサイトを作っていきます。
一応、ソースコードをコピペしても完成するように解説していますので、これから自作でWordPressサイトを作ってみようという方は是非参考にしてくださいね!
目次
動画解説
【更新情報】2019年10月22日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください!
■サイトの骨組み作成までを解説
■CSSでのレイアウト調整を解説
動画中に解説したソースコードの完成版は以下からダウンロードできます。参考にしてみてください。
【初心者でもできるWordPress講座】シンプルなブログサイト完成ソース
1 file(s) 152.15 KB上記動画では、CSSの実装内容を変えています。動画中に解説しているCSSのコードとブログ記事中に記載しているCSSのコードは若干異なりますのでご注意ください。
作成するためのツール、環境を準備する
まずは、WordPressのオリジナルテーマ作成に必要なツール等を準備しましょう。
- ローカル環境(MAMP or XAMP)を構築し、WordPressをインストール
- レンタルサーバー&ドメイン⇛(Webへ公開したい時)
- エディタ(Atomがおすすめ)⇛コーディングで使用
- FTPツール(※サーバーへファイルをアップするためのツール)
ローカル環境(MAMP or XAMP)
とりあえずWordPressサイトをお試しで作ってみたいなら、自分のローカル環境(PC)にMANP(Mac)/XAMP(Windows) をインストールし、ローカルPC上にWordPressをインストールすることをおすすめします。
以下記事で、ローカル環境構築の備忘録を記載してますので、参考にどうぞ。
WordPressローカル環境の構築 備忘録
レンタルサーバー&ドメイン
WordPressのオリジナルテーマを作成し、本格的にWebに公開したいなら、レンタルサーバー/ドメインを契約しましょう。
以下記事でレンタルサーバー&ドメインについて簡単に紹介しています。参考にどうぞ。
【初心者用解説】そもそもWordPressって何?
エディタ
実装する時に使うエディタを用意しましょう。PCに標準で入っているメモアプリでもよいのですが、せっかくなので実装に便利なツールを用意しましょう。
私のおすすめはAtomというエディタです。
Atom
FTPツール
作成したオリジナルテーマや修正ファイルをサーバーへアップする時に必要です。
Windowsならフリーソフトの「FFFTP」が有名です。
FFFTP
Macなら「Cyberduck」というソフトがおすすめです。
Cyberduck
テーマフォルダを作成
さて、必要な環境、ツールを揃えたら、次は、オリジナルテーマを作成するためのフォルダやファイルを準備しましょう。
WordPressのテーマを作成するには、最低限以下のファイルがあれば大丈夫です。以下から空のテンプレートファイルをダウンロードできます。
テーマフォルダ 空のテンプレート
1 file(s) 681.67 KBすべてのページ生成に使用される最も基本的なテンプレートファイルです。
WordPressの様々な機能を使いたい時、このファイルに処理を加えます。
サイトをデザインするためのスタイルシートです。
WordPress管理画面からテーマ選択する際に表示されるサムネイル画像です。
テーマを有効化する方法
作成したテーマフォルダをWordPressをインストールした場所内にある[wp-content]内の[themes]フォルダの中にアップロードします。(※ローカルPC環境の場合は、インストールしたWordPress内の同様の場所に配置しましょう。)
WordPress管理画面の「外観」→「テーマ」を選択します。
アップロードしたテーマファイルのサムネイル画像が表示されますので、選択して「有効化」しましょう。
これで、実装前の準備が整いました。
次からいよいよコーディングしていきましょう。
スポンサーリンク
コメント
こちらのソースをまるっとコピーしたのですが、なぜかウィジェットが表示されません。。。
コメントありがとうございました。
こちらで再度ソースコードを確認したところ、WordPress4.9.6でウィジットは表示されました。
確認ですが、WordPress管理画面のメニューから「外観」→「ウィジェット」に入り、サイドバー1と表示されているエリアにウィジットを登録していますでしょうか?
WordPress管理画面からのウィジット登録方法については、ブログ内であまり説明していなかったので、もしかしたら登録されていない可能性があると思いました。
申し訳ありませんが、宜しくおねがいします。