2017/04/23SHAREツイートシェアはてブGoogle+PocketLINEこんにちは!「5日で学ぶWordPressテーマ作成」の2日目となりました。1日目の「必要なツールを揃えよう」では必要なツールを用意したり、ローカル環境でWordPressを動かすための準備をしました。今日のレッスンはここまでテーマについて一般的にWordPressのテーマを一から全部自分で作るとなると以下のように、3のステップを踏むことになります。今回の5日間チャレンジではSTEP3の「WordPress用にHTMLを書き換える」部分について勉強します。デザインをする作りたいウェブサイトまたはブログのテーマに沿って、ウェブサイト全体のデザインをします。ページ全体の色合いやボタンの形といった見た目の部分だけでなく、記事ページでタイトルや日付、本文などの必要な情報をどこにどのように表示したら良いのかというレイアウト的な部分も合わせてデザインしていきます。ここで、ウェブサイトの顔が決まってしまうため、とても重要なステップとなります。HTMLでページを作成するウェブサイトやブログのデザインが決まったら、実際に手を動かしてコーディング作業に入ります。HTMLやCSSなどを使って、デザインを参考にしながら必要な各ページのHTMLファイルを作成します。一般的にWordPressの場合には、記事一覧が表示されたページ、カテゴリー別に記事一覧が表示されたページ、記事の個別ページの3つのHTMLファイルがあれば十分です。WordPress用にファイルを書き換える最低限必要なHTMLファイルが揃ったら、それをWordPressで使えるようにするためにファイルを修正していきます。WordPressで管理されている記事やカテゴリーの情報を作成したHTMLファイルに反映していく作業になります。本来ならWordPressのテーマを作成する前に各ステップを踏まなければなりません。そこまでやっていると時間がかかってしまいます。そこで、私の方でSTEP2の「HTMLでページを作成する」までを予め進めています。今回、作成したテーマはアプリやガジェットなどといった、IT関連の情報を発信する架空のブログ「update.com」というものです。記事一覧を表示する部分とカテゴリーなどを表示する部分の2カラムでページが構成されています。その他にも、上部のメニューバーや下部に配置されたフッターなど基本的なウェブページの構成を網羅したものになっています。こちらのダウンロードリンクからデータをダウンロードしておきましょう!update.com.zipという圧縮されたファイルになっているので、解凍ソフトを使ってファイルを解凍してください。ファイルを解凍するとupdate.comというフォルダ内にindex.htmlやarticle.htmlなどのファイルが確認できます。ファイルが無事にそろっているのを確認できたら、これから早速テーマを一緒に作成していきましょう!初めての方でも、私と一緒に少しずつ作っていくので安心してくださいね。ローカル環境のWordPressを起動しよういま、ダウンロードしていただいたupdate.comのテンプレートをまずはローカル環境のWordPressに適用してみましょう。ローカル環境のWordPressの設定がまだの人はこちらの「WordPressテーマ作成に必要なツールを揃えよう」記事を参考にしてみてくださいね。ローカル環境のWordPressを使用するために、MAMPを起動してウェブサーバーを起動します。1日目の設定が完了している場合は、「サーバーを起動」をクリックするだけで大丈夫です。アイコンがくるくる回っている間は準備中なので少し待ちましょう。アイコンが緑色になった準備OKです!Chromeなどのウェブブラウザにhttp://localhost:4649/wordpress/と入力してエンターキーを押します。WordPressのデフォルトのテンプレートが反映されたトップページが表示されたら準備OKです。ファイルを作成してテーマとして認識させよう!ダウンロードしていただいたupdate.comですが、実はこのままだとWordPressのテーマとして使用できません。WordPressに「このファイルがテーマなんですよ〜」と認識させる必要があります。クリックしたら、ダウンロードしたupdate.comというフォルダを選択して開きます。Textのウィンドウの左側にファイル構造がツリー状に表示されます。これで、フォルダ内の各ファイルの位置関係が簡単に把握できるようになります!テンプレートに必要なファイルをつくるupdate.comというフォルダの上にマウスを移動させて、右クリックをします。File」をクリックしましょう!「untitled」というタブが新たに作成されます。キーを押して保存してしまいましょう。保存用のウィンドウが表示されるので、ファイル名に「style.css」と付けて保存します。今後、ファイルを新規に作成する場合はこの方法になります。忘れずにしっかり覚えておきましょう!出来たばかりのstyle.cssは空っぽのファイルです。ここに次のようにコードを入力して再度保存します。3つのファイルが必要です。今のファイル構造だと、正しく認識されないためファイル名を次の様に変更してみてください。single.phpMacをお使いの方は「拡張子を.phpにしますか?」と聞かれるので、迷わず「.phpを使用」を選択してください。update.comのフォルダを移動するまだ、テンプレートは作成中ですがひとまずupdate.comというフォルダをMAMP上で動いているWordPress内に移動しちゃいましょう。MAMPのデフォルトの設定の場合は以下の場所にWordPressが格納されています。いうフォルダにupdate.comフォルダを移動させます。最終的なパスは次のようになります。/Applications/MAMP/htdocs/wordpress/wp-content/themesテーマの有効化ファイルの移動が完了したら、http://localhost:4649/wordpress/login/にアクセスして管理者画面に移動します。テーマ一覧が表示されたページに移動します。みると、あなたが作っているupdate.comというテーマも表示されているのがわかると思います。テーマの上にマウスを移動させると、ボタンが現れます。「有効化」というボタンをクリックしてみましょう。クリックしてみましょう。ページを開いてみるとなんとびっくり、文字だけ表示されたページになっているかと思います。これは、ページのレイアウトを司るCSSファイルがちゃんと読み込まれていないためです。CSSファイルへのパスを修正する今後はMAMP上で動いているWordPress内にあるupdate.comファイルを修正していきます。SublimeTextでさきほど移動させたupdate.comフォルダを開いてください。フォルダが開けたら、index.phpを開いて<head>タグ内にある<link>タグを修正します。?>/css/style.css"></head>hrefのところでget_template_directory_uri()を使うことで、テンプレートファイルまでのパスを取得して、目的のCSSファイルに繋げられるようになります!保存をしてページをリロードしてみましょう!CSSファイルが無事に読み込まれて、ページがちゃんと表示されたと思います。今日のレッスンはここまでお疲れ様でした!2日目のレッスンはここで終わりです。今日はWordPressでテーマを作成する手順やローカル環境のWordPressにupdate.comのテンプレートを有効化する方法について勉強しました。途中、CSSが反映されないトラブルに見舞われましたが、コードを修正することで最終的にはちゃんとページが表示されました。次のレッスンではupdate.comのテンプレートを分割して、ホーム部分のテーマを作成していきます。続きが気になる方は3日目の『WordPressのテーマを分割して作成してみよう』へお進みください。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。Website前の記事HTMLの入門編の終わりに、ページを作ってみよう!次の記事WordPressのテーマを分割して作成してみようデザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。