【簡単】WordPressのテンプレート作成 初心者と非エンジニア向け説明

wordpress-theme-jaカバー

個人の方も企業のPR担当者の方も、Webを使っての情報配信をしている方はたくさんいらっしゃいますね。

Webでの情報配信の良さは「タイムリーにすぐ発信」が、他の媒体と比較して最大のメリットと言っても過言ではありません。

WordPressは駆逐されるかとも一時期言われてきましたが、タイムリーな更新の面からも、SEOの観点からもWordPressが現在のところ、多くの方にとって最も有効なツールであることは揺るぎないようです。

本記事では、WordPressのテンプレート作成の方法を初心者や非エンジニア向けにソースコード付きで説明します。

WordPressテンプレート作成(テーマ化)を人任せにしない!

HTML/CSS(JS)で作ったかっこいいデザインのサイトで情報発信しようとしても、修正できる人が限られているのでは「タイムリー」でもなんでもなくなってしまいますね。

非エンジニアだと「コンテンツを書くのはできるけど、テーマのソースはいじりたくない」というのが本音ではないでしょうか?

私も以前はそうでした。

本記事では、「非プログラマーの方へ」向けたWordPressテンプレート作成(テーマ化)手順を紹介したいと思います。

一番分かりにくいファイル構造の大枠だけ押さえれば、あとは応用が効くものです。

細かい詳細は下方にアップしたソースデータを参照していただければと思います。

このサイトを例にします。このサイトはHTML/CSS(JS)で作成したあと、以下の手順に則ってWordPressテーマ化したものです。

topdesign

html/cssのサイトをWordPressテンプレートへ!概要

    1. WordPress(のアプリ)をサーバーへインストール
      サーバーによって異なります。詳しくは本家のサイト等を参考にお願いします。ちなみに私はAWSのサーバーを使っています。
    2. index.htmlをphpのファイルに分割する 
    3. 必要なプラグインをインストールし、WordPressコンソールで中身を入力する

index.html を各phpファイルへと分割

オリジナルの index.htmlをphpのファイルへ分割していきます。

“front-page.php” から”header.php”と “footer.php” ファイルが呼び出されて、これら3ファイルは同時に動作して1ページを表示します。

どれが欠けてもだめです。

wordpress-file-stracture

 “front-page.php”の基本コンセプト

各 <?php なんとかかんとか ?>“という部分がPHPのコード部分です。

PHPのコードとHTMLのコードが一つのファイル内で混在しているようなかたちです。

<?php と  ?> で囲った部分がPHPですよーということですので、囲むのを忘れないようにします。

その他のファイル

“index.php”と “functions.php”もなくてはならないファイルたちです。

index.php

Webサーバはまず “index.php”を読みにいきます。

今回トップページとなるのは” front-page.php”ですが”index.php”を”front-page.php” の代わりとして編集してトップページにしても構いません。

が、トップページを個別のページとして都度編集することもあるので、分割して”front-page.php” とすると後々便利です。

functions.php

“functions.php”は、ちっさいアプリみたいなもので、アイキャッチ画像の指定や抜粋のテキスト文字数指定などを書き込んでおくファイルです。

各機能を使うときは各PHPファイルから”functions.php” を呼び出します。

本サンプルのファイル

サンプルファイルはこちらの私のGithubの中です。

よろしければご参照ください。

おわりに

WordPressのテンプレートは手順通りに作業していけば誰でも作れるものだということが分かりました。

WordPressでの開発の基礎については、以下の記事でご紹介する書籍が非常に良かったのでレビュー記事をまとめました。ご興味ある方はご参照ください。

コメント

タイトルとURLをコピーしました