WordPressで「自作テーマを作成しオリジナルのブログサイトを作成する」と言うことで前回の記事ではローカル環境を構築し、ローカル環境上でWordpressのサイト表示する事ができました。
今回は第二弾として、Wordpressのサイト制作を効率的に行うための準備を行いたいと思います。
＼ NinoBlogのサービス紹介です! ／
実績100件以上！集客できるホームページ制作します SEO対策とデザインで集客力UP！更新可能なホームページを！自作テーマ制作を効率的に行うための準備
準備として以下の項目の準備を行います。
- HTML、CSS、JavaScriptでサイトのコーディング(今回は私が製作したファイルをダウンロードできます)
- エディター（私はVsCodeを使用します）
- _S(UnderScore)をインストール
- テーマファイルの編集方法
- riset.css、style.css、JavaScriptファイルの読み込み
それではひとつずつ準備を行いましょう！
HTML、CSS、JavaScriptでサイトのコーディング（ファイルダウンロード）
今回の自作テーマ制作の趣旨はコーディングではありませんので、予め私が作成したファイルがありますので、そちらを使い自作テーマ開発を行なっていきます。
自作テーマ開発での主な作業としては、用意したコーディングファイルをWordpress形式に書き換えスタイルを整えながら新しい機能の追加を行うと言うものです。
コーディングしたサイトのデザインは以下の画像をご覧ください。
サイトTOPページ
ダウンロードは以下のリンクから行なってください。
エディタを用意
テーマ作成にはエディタが必要になっています。
エディタにはVsCodeと言うエディタを使用することをお勧めします。
理由としては、プログラミングの補助機能に優れコードのエラーチェックなどにも対応しスムーズに開発を行う事ができます。
と言っても一番は自分の慣れているエディタですので使いやすいものを使用してもらって大丈夫です。
VScodeのダウンロードはこちらから
_S(UnderScores）のインストール、適応
ここではスターターテーマのUnderScoresについてと、UnderScoresのインストール、また前回ローカル環境開発で作成したWordpressサイトに適応させるまでを説明します。
なぜ自作テーマ開発で既存テーマを使用するのか？
自作テーマ開発には２種類あります。
一つは、自分で1からコードを書き制作する方法と、
もう一つは、スターターテーマと呼ばれる自作テーマ開発を前提に作られたWordpressテーマをインストールしコードを書き足しながら制作する方法です。
今回の私が紹介している方法は後者のスターターテーマからの開発です。
スターターテーマはいくつか種類がありますが、その中でも定評のある「UNDERSCORES（アンダースコア）」と言うテーマを使い自作テーマ開発を行います。
_S(UnderScore）インストール手順
①_S(UnderScores)の公式サイトにアクセスし「Theme Name」の欄に自作テーマの名前を入力し「GENERATE」をクリック
②Wordpress管理画面の「外観」から「テーマ」を選択
③テーマ画面に移動したら「新規追加」をクリック
④「テーマをアップロード」クリック
⑤先程_S(UnderScore)でダウンロードしたZipファイルを「ファイルを選択」で解凍せずに選択、もしくはZipファイルをドラック&ドロップして「今すぐインストール」をクリック
⑥テーマのインストールが完了したら、「有効化」をクリック
これでテーマ_ｓ(UnderScore)をインストールし有効化する事ができました。
サイトの確認は、
管理画面左上のサイト名をクリックすると確認する事ができます。
表示されたサイトを見てみると、全くブログサイトとはかけ離れた骨のような見た目をしています。
ですが、これが＿S(UnderScores)のいい所なのです。
無駄にスタイルや機能を付け加えたスターターテーマをよく目にしますが、それでは逆に自作テーマ開発の邪魔になってしまう場合があるのです。
テーマファイルの編集方法
スターターテーマを編集する方法は２種類あります。
一つは、Wordpress管理画面＞外観＞テーマエディターから記述を変更する方法
もう一つはテーマファイルをエディタで開きコードを編集する方法
自作テーマを作成する場合はローカル環境でなおかつ記述するコード量も多いですので後者のテーマファイルをエディタで開きコードを編集する方法でテーマファイルを編集します。
テーマファイルの開き方
Localを使用しローカル環境でのテーマ変更の際に使用するテーマファイルを簡単に開く方法を解説します。
①LocalのTop画面にに移動し以下の画像のマークされている部分をクリックする
するとLocalでWordpress環境構築の際に行なったサイトの名前（今回の私の場合はBlogCreateChallenge）のフォルダが表示されます
②フォルダ内の「app」→「public」→「wp-content」→「themes」→と進んでいくとテーマ名（_sUnderScoreで設定したテーマ名）が保存されていますのでそれをエディタで開き編集を行なっていきます。
CSSファイル、JavaScriptファイルの読み込み
ここまでで、_s（UnderScores）のインストールしテーマファイル開きました。
ここからは次の記事から作成するHTMLをWordpress化した時の為にデザインのファイル群をテーマに読み込ませたいと思います。
テーマファイルにCSS、JavaScriptファイルを読み込ませる際には、HTMLの場合は「headタグ」に記述しますが、Wordpressでは「functions.php」での読み込みを推奨されています。
実際に、_s(UnderScores)のfunctions.phpにはデフォルで以下のような記述があります。
function blogcreatechallenge_scripts() {
wp_enqueue_style( 'blogcreatechallenge-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_style_add_data( 'blogcreatechallenge-style', 'rtl', 'replace' );
wp_enqueue_script( 'blogcreatechallenge-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blogcreatechallenge_scripts' );この記述により、「style.css」、「navgation.js」の読み込みを行なっています。
では、CSSファイルとJSファイルの読み込みの記述を行なっていきます。
以下のコードが追加後のfunctions.phpの記述です。
function blogcreatechallenge_scripts() {
wp_enqueue_style( 'riset-style', get_template_directory_uri() . '/riset.css', array(), _S_VERSION );
wp_enqueue_style( 'blogcreatechallenge-style', get_stylesheet_uri(), array(), _S_VERSION );
wp_style_add_data( 'blogcreatechallenge-style', 'rtl', 'replace' );
wp_enqueue_script( 'blogcreatechallenge-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
wp_enqueue_script( 'blogcreatechallenge-main', get_template_directory_uri() . '/js/main.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blogcreatechallenge_scripts' );追記した部分についての解説をします。
2行目（上記のコード）
wp_enqueue_style( 'riset-style', get_template_directory_uri() . '/riset.css', array(), _S_VERSION );この記述によって、「riset.css」を読み込むことができます。
さらに、この記述を一番上にした理由としては、Style.cssがリセットCSSに書き換えられることを防ぐ為です。
「wp_enqueue_style」はWordpressが生成するページにCSSファイルを追加する関数です。
関数の引数として、カッコ内には
riset-style→スタイルシートのハンドルを登録
get_template_directory_uri() . ‘/riset.css’→スタイルシートのURL
array(),→先に読み込ませたいCSSの設定（今回は空に）
_S_VERSION）→このCSSのバージョンを指定
７行目
wp_enqueue_script( 'blogcreatechallenge-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );この記述によって、「main.js」を読み込むことができます。
「wp_enqueue_script」はJavaScriptファイルの読み込みを行う為の関数です。
関数の引数としては、「wp_enqueue_style」同様です。
Style.cssは_s(UnderScores)のデフォルトの状態で読み込まれていますのでそちらを使用します。
CSSファイル、JSファイルの読み込みは以上で完了です。
CSSファイル・JSファイルをテーマに組み込みスタイルを適応させる
ではサイトのCSS、JSファイルに記述の移行を行います。
ここまでで、Style.css、riset.css、main.jsの読み込みをしましたのでテーマ内にCSSファイルとJavaScriptファイルを設置します。
それぞれ以下のように記述をしてください。
style.cssへの記述
_s(UnderScores)デフォルトのStyle.cssには、記述がされておりますので既存のコードを削除し、前回の記事で配布したstyle.cssの内容を全てコピーしペーストします。
riset.cssへの記述
_s(UnderScores)にはデフォルトでriset.cssがありませんのでテーマファイル直下の階層（style.cssと同じ階層）にダウンロードしたrist.cssファイルを設置します。
main.jsへの記述
_s(UnderScores)にはデフォルトでmain.jsファイルがありませんのでテーマファイル直下の階層（style.cssと同じ階層）にある「js」ディレクトリ内にダウンロードしたmain.jsファイルを設置します。
JavaScriptファイル内のコードに関しては別の記事で解説を行います。
まだファイルをダウンロードできていない人は以下よりダウンロードをお願いします。
まとめ
この記事では自作テーマ開発を行うにあたっての準備編として、
- HTML、CSS、JavaScriptでコーディングしたサイトのファイルの準備
- エディタの準備
- 自作テーマ開発で使用するスターターテーマ_ｓ（UnderScores）のインストール、適応
以上のことを行いました。
それでは次の記事からトップページを作成していきましょう！