yabublogyabublogホームプログラミングWordPress【WordPress】自作でオリジナルテーマを作成する方法【その1】2019/08/11SHAREツイートシェアはてブLINEPocketこの記事では、《HTMLページを元に、WordPressのオリジナルテーマを作成する方法》について、ITエンジニアの僕が学習した内容をまとめています。開発環境の準備テーマフォルダの準備テンプレート化の基本このあたりについて解説します。※本記事は、自分で学習したことのまとめ用として書いています。WordPressの解説で誤った点があれば、スローして頂ければ喜んでキャッチしますのでお願い致します。開発環境の準備WordPressのテーマ保管場所に、これから作成するWordPressテーマのフォルダを作成します。フォルダの名前は自由に設定してOKですが、必ずデフォルトテーマ『twentyseventeen』などと同じ階層に作成してください。※本記事では、フォルダ名を『demo』として、解説していきます。上記のような感じです。今後はこの『demoフォルダ』上でテーマ制作作業を行っていきます。外部ファイルのアップロードテーマで使う外部ファイルはフォルダ内で管理します。ダウンロードしたHTMLデータから『cssフォルダ』と『imagesフォルダ』を、demoフォルダ内にアップロードします。upload)に保存されます。style.cssの準備HTMLデータ内のstyle.cssをdemoフォルダにアップロードします。アップロードしたstyle.cssをテキストエディタで開き、冒頭にスタイルシートヘッダーを記述します。上記のような感じです。スクリーンショットの準備テーマのスクリーンショットscreenshot.pngをdemoフォルダにアップロードします。本来は完成後のテーマのキャプチャであることが望ましいですが、現時点ではデザインデータから仮のモノを作成してOKです。PNG形式の画像をdemoフォルダ内に『screenshot.png』という名前で保存することで、テーマのスクリーンショットとして認識されます。index.phpの準備テーマには、index.phpが必要です。現時点では中身はコーディングせずに、空のファイルを作成するだけでOKです。index.phpの名前を付けてファイルを作成すれば、テーマとして認識されます。テーマの確認WordPressの管理画面にログインをして、作成したテーマが認識されているか確認しましょう。テーマ』に進むと、作成したテーマが表示されているはずです。上記のような感じです。『有効化』の箇所を押して、作成したテーマの詳細を確認してみましょう。テーマのスタイルシートヘッダーに記述した内容が反映されているはずです。有効化したテーマをサイト上で確認してみましょう。下記の画像の赤枠にある『サイトを表示』を押すと確認できます。※この時点ではまだ有効なテンプレートが1つもない状態ですのでサイトは真っ白です。必要に応じてデフォルトテーマと開発中テーマを切り替えながら進めましょう。テンプレート化の基本header.phpの作成WordPressのテンプレートファイルは、HTMLコードを元にして動的生成が必要な箇所をテンプレートタグに置き換えていく作業が基本になります。練習としてヘッダー部分を担うテンプレートパーツheader.phpを作成しながら解説します。demoフォルダ内にheader.phpを作成します。HTMLページからヘッダー部分のHTMLコードをコピーして、header.phpに貼り付けます。デザイン上のヘッダー部分』ということです。具体的には以下のソースコードになります。href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;&lt;/header&gt;</span>そして、上記のコードの中から動的生成が必要な箇所をテンプレートタグに置き換えていきます。いくつかHTMLコードには存在しない行を追加することもあるので、下記に記載するコードを注意深く見てみて下さい。Codexを参照してください。website!"&gt;&lt;/div&gt;&lt;/div&gt;</span>まだ、サイトを表示しても真っ白な画面が表示されると思うので、まずは真っ白だということを確認してみてください。header.phpをコーディングしてもトップページが真っ白なままの理由は、index.phpからheader.phpを呼び出せていないからです。header.phpはパーツであって、まとめ役ではありません。パーツのまとめ役であるindex.phpでheader.phpを呼び出す必要があります。class="inline-delimiter">?&gt;</span>とindex.phpに1行書くことで、header.phpを呼び出すことができます。これでもう一度確認してみましょう。ヘッダー部分が表示されるはずです。URLを出力するテンプレートタグheader.phpでは、URLを出力するテンプレートタグ(関数)がいくつも使われています。?>は使用中テーマのURLに置き換わり、出力されたページ上ではhttp://サイトのドメイン等/wp-content/themes/demo/のようになります。?>はサイトトップページのURLに置き換わり、主にaタグ内で使用します。テンプレートタグは、テンプレートファイル内で頻繁に使用しますので覚えておくのがオススメです。固定ページのURL固定ページのURLは以下の形になります。http://サイトのドメイン等/固定ページスラッグ/また、階層を持つ固定ページの場合のURLは、以下の形になります。http://サイトのドメイン等/親ページのスラッグ/子ページのスラッグ/そして、サイトURLの箇所はテンプレートタグにより出力しますので、固定ページURLは以下の形になります。class="inline-delimiter">?&gt;</span>/固定ページスラッグ/テンプレート化の3つのコツHTMLをテンプレート化する際のコツを3つご紹介します。?>を忘れないそれでは、ひとつずつ解説していきます。1:URLは全てテンプレートタグに置き換えるまず1つめは、他ページへのリンクや外部ファイル・画像などを参照するURLは全てテンプレートタグに置き換えることです。1つのテンプレートが様々な階層のページで使用される可能性があるので、相対パスの使用は厳禁です。直接パスで指定すれば問題は起きないと思うかもですが、仮にサイトのドメインが変わることになれば全て書き直しになってしまいます。変わる場合などが考えられますが、最も大きな理由は今回のようにURLの異なる開発環境上でテーマ開発をすることができない、というです。そのため、外部ファイルに対してリンクや参照をする箇所はテンプレートタグを使用することが推奨されます。2:投稿に関する情報を表示する時は、必ずループを作成する2つめは、投稿に関する情報を表示したい時は、必ずループを作成することです。ページで表示される投稿(固定ページ)についての情報は、ループ内でしか取得することはできません。使用したいテンプレートタグが『ループ内専用』か『どこでも使用可能か』についても気を付ける必要があります。?>はループ内でなければ使用できません。Codex内の各テンプレートタグの説明で確認できます。?>を忘れないことです。?>は、全てのテンプレート内の</head>タグ直前に必ず挿入します。このタグが無いと、一部のプラグインや機能が正しく働かなくなります。?>というタグは</body>直前に必ず挿入します。テンプレート化の基本については、理解できたかと思います。これ以降の作業については次の記事で解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。