ホームページ作成で世界の人々に利用されているWordPressのテーマを作成してみます。 開発環境はMAMPを利用してApacheサーバとMySQLを使っていきます。MAMPは元々Mac用に開発されたソフトでしたが、現在ではWindowsでも利用が可能となっていますので是非使ってみて下さい。
ダウンロードするとMAMP PRO（有料）も一緒にダウンロードされますが、必要なければ削除すれば良いです。ダウンロードしたからといって課金されるものではないのでご安心ください。
ダウンロードが完了すると象のマークのアイコンができますのでダブルクリックすると下記のようなアプリが立ち上がります。
Start ServersをクリックするとApacheとMySQLが起動します。
起動が完了するとグリーンに点灯したのが確認できます。
目次
WordPressの導入
次はWordPressをMAMPの中にインストールしていきます。
WordPressはwordpress.comとwordpress.orgがありますが、ダウンロードサイトはwordpress.orgの方にありますのでそちらからダウンロードしてください。 サイトは英語表示になっていますが、日本語にも対応していますのでご安心ください。
WordPressの最新バージョンは2019年7月現在で WordPress5.2.2です。
ダウンロードが完了するとwordpress-5.2.2-ia.zipという圧縮ファイルがダウンロードされていますので、ダブルクリックで解凍するとwordpressというフォルダができます。
次はWindowsならExplorer、MacならFinderでMAMPのフォルダーを表示します。WindowsでしたらCドライブ直下にMAMPフォルダがあると思いますが、Macの場合ですとアプリケーションフォルダの中になります。
MAMPフォルダの中にhtdocsというフォルダがありますのでその中に先ほどダウンロードして解凍したwordpressというフォルダをコピぺします。
ダウンロードしたファイルと解凍されたフォルダはもう必要ないのでゴミ箱に移動させてもオッケーです。
MAMPフォルダのhtdocsフォルダ内にwordpressフォルダを移動完了しましたが、このフォルダ名がブラウザでアクセスする時のパスになりますので、任意の名前に変更しても大丈夫です。”あなたの名前.blog”としても良いでしょう。
MAMPを利用してのアクセスでは” http://localhost/wordpress”のような形になります。
MAMPでは直接ルート情報を指定できますので、直接指定した場合は”http://localhost/”だけで表示が可能になります。
WordPressの設定
先ほどの続きです。 MAMPを起動してGoogle Chromeを起動し、localhostにアクセスしてみます。検索のパスは”http://localhost:8888″です。
8888はポートの指定でMAMPは8888を使用しています。ポートの変更やルートの変更は画面左上のMAMP➡️Preferences（設定）から可能です。
まだ設定していない状態でhttp://localhost:8888/wordpressにアクセスしてもNot Foundと表示されてしまいます。
http://localhost:8888にアクセスすると上記のような画面が表示されますので設定していきましょう。上記の画面を読むとデータベースの設定が必要ですよと書かれていますので、”さあ、始めましょう！”をクリックする前に次の作業に進みます。
データベースの設定をしましょう。
この画面の Open WebStart page と書かれているアイコンをクリックしてください。すると下の画面が表示されます。
この画面のTOOLSという表示をクリックするとドロップダウンリストが表示されてPHPMYADMINの項目が出ますのでクリックします。
すると下記のように表示されているのが確認できます。
この画面の左端あたりにNewと表示されているのでクリックして新しいテーブルを作成します。
Create databaseの下にDatabase nameとありますので、ここではhtdocs内のwordpressという名前で利用していますので、それを使います。
ファイル名を変更されている方は適宜変更されたファイル名をお使いください。
Database nameの隣はutf8_general_ciでオッケーです。もし表記が違っている場合はutf_general_ciに変更してください。
記入が完了したらCreateをクリックしてテーブルを作成します。すると左側のツリーにwordpressと新しく表示されているのが確認できます。
それまで問題なくできましたらhttp://localhost:8888でWordPressの設定画面に移動します。
移動しましたらここで”さあ、始めましょう！”をクリックします。すると下記の表示に変わります。
データベース名は先ほどのものに変更されています。 ユーザー名ですが、MAMPではデフォルトでrootが設定されているのでrootとし、パスワードもrootとします。
あくまでもローカル環境下での使用ですので問題はないのですが、グローバル環境での利用である場合はユーザー名やパスワードの変更は必要になります。
データベースのホスト名はlocalhostのままで結構です。 もしそうなっていない場合はlocalhostと記入してください。
テーブル接頭辞はそのままで良いです。もしも複数の WordPressを共存させたい場合は変更してください。今回は１つだけですのでこのままにします。
最後は送信ボタンをクリックします。
下記の画面が出ましたら、そのままインストールの実行をクリックしましょう。
クリックすると下記のような画面に変わります。
あとは貴方のお好みでタイトルやユーザー名を記入します。パスワードも任意のもので良いですができるだけ強力なものが良いでしょう。あとはクリップボードなどに貼り付けておけば良いです。
メールアドレスもご自身の利用しているアドレスを登録しておきましょう。
検索エンジンでの表示はチェックを入れておきます。 のちに公開するときはチェックを外すことを忘れないでください。 ノーインデックスでも問題はないですけど、SEO対策には必要かと思います。記入が完了したら” WordPressをインストール”をクリックしましょう。
このように表示されていれば成功です♬
ではログインボタンをクリックしましょう。
無事ログインが完了すると下記のように表示されます。
いよいよテーマの作成です♬
まずは現在の WordPressにデフォルトでインストールされているテーマを確認してみましょう。
画面左のサイドバーにある外観をクリックすると下記のような画面が出て、Twenty Nineteenが有効になっているのが確認できます。
WordPressのテーマはどこにあるかを確認しましょう。
今回はMAMPをダウンロードしてその中のhtdocsに WordPressをインストールしました。そのwordpressフォルダを開いてwp-content➡️themsと進むとその中にデフォルトでインストールされているテーマの名前が確認できます。
下記のようになっていると思います。
ここに新たに作ろうとするテーマのフォルダを作成します。
WordPressがテーマとして認識するには最低２つのファイルが必要になりますので、自分で利用しているエディタでファイルを作成していきます。
今回はVisualStudioCodeで作成していきます。普段はAtomなのですが😅
まずはthemsの中に任意のフォルダを作成します。
ここではchockeysというテーマ名のフォルダを作りました。
この中にindex.phpとstyle.cssという２つの空のファイルを作成しておきます。
面白いことにこれだけで中身の無いテーマが作成されてます。
ワードプレスの外観のテーマをご覧ください。
このように新たなテーマができています。が！
中身は空ですし、作成者の表記やバージョン名もありません。このままこのテーマを使っても表示は真っ白になってしまいます。
ひとまず作成者やバージョンくらいは整えておきましょう。
ではVisualStudioCodeに戻ってstyle.cssに記述していきます。記述の内容は以下の画像のようにしました。
CSSではコメントアウトされますが、WordPressは読み込みます。
WordPressの外観からテーマをもう一度確認してみます。
これで本格的にテーマを作成する準備が整いました。
あとはindex.phpファイルに必要な記述をしていきますが、世の中には便利なものを開発してくださる方がいらっしゃいまして、ある程度のことはすでにできているものを加工して利用できるものを提供しているサイトがあります。
それを利用させていただいて進めていきたいと思います。
その前にこの空のテーマを必ず有効化しておいてください。
Bootstrapを使おう
サイト名はstartbootstrap.comになります。
サイトにアクセスすると下記の表示が出ますのでthemsをクリックしてください。 色々なテーマが出ていますが、ここに展示されているテーマは無料で利用が可能で商用もできますし、より高機能なものは有料での提供もあります。
無料の基本テーマはあくまでも基本構造の提供なので加工が必要になりますが、多くのプログラマーがフロントエンドやデザインに労せず開発が進められるので人気を集めています。
上記はstartbootstrapのスタートページです。ここから基本テーマを選択していきます。
今回はGrayscaleを利用してみます。 訪問者の皆様にはご自身の作りたいものを選択して適宜に加工してみてください。多くの場合表示の違いはあるものの差ほど違和感なく同じように進められると思います。
ではGrayscaleをダウンロードして進めてみましょう。
下の画像はGrayscaleをダウンロードしたファイル群です。
とりあえずファイルを確認したところで、次の工程に入ります。
MAMPのフォルダーからhtdocs➡️wordpress➡️wp-content➡️themes➡️chockeysと移動し、上記画像のcss,img,js,scss,vendorの各フォルダーをコピペしておきます。
index.htmlはコピペする前に名前をindex.phpに変更してコピペしてください。
最初に作ったindex.htmlやstyle.cssは削除しておきます。
完了したらローカルホストにアクセスしてみましょう。ログイン中でしたらページの再読み込みをしてください。
ログアウトしていたら、http://localhost:8888/wp-adminとしてログインしてください。
ひとまずこのような感じで表示されました。WordPressでの表示の仕方は通常のhtmlやcssで作られるサイト表示と違っていて、WordPress独自のテンプレートタグを使っていかなければいけません。
ここでは多く解説することはできませんが、もしも興味があるようでしたら、wordpress.orgのドキュメントをご覧ください。
では次の作業です。元々の見栄えを確認するために再度htmlでの表示状態を確認しておくために画像を掲載します。
このように表示させるためにはindex.phpファイルを書き換えなければいけません。文字表記のテーマになっているのはcssが同じフォルダ内にあるだけでなく、path（パス）が通っていなけれまいけません。
現在のindex.phpの中身を見てみましょう。
13行目に<!– Bootstrap core CSS –>とコメントがあります。その次に14行目に<link href=”vendor/vootstrap/css/bootstrap.min.css”rel=”stylesheet”>となっています。
ですが現在のファイルの位置はMAMP内にあるhtdocsの中のwordpressがルートの出発点になっています。そしてwordpressフォルダ内のwp-contentの中にあるテーマを表示させるのですから、<link href=”wp-content/themes/chockeys/vendor/bootstrap/css/bootstrap.min.css” rel=”stylesheet>にならないとcssが反映されないです。
では14行目を書き換えて表示してみます。
このようになりましたが、まだ画像が反映されていませんので次は、21行目の<!–Custom styles for this template–>とコメントされていますので、次の22行目を書き換えてみます。書き換えるといっても先ほどと同じでpathを指定するだけです。grayscale.min.cssはwp-content/themes/chockeys/css/grayscale.min.cssにありますので書き換えて表示してみます。
世界の人々に利用してもらえるテーマにするには、まだまだ加工が必要ですし、wordpress.orgの審査が通って初めて公式にテーマとして公開されますのでこのままでは不十分ですが一連の工程を少しばかり理解していただけたのではないでしょうか？
まとめ
今回は表示のみのお話になりました。
ウィジェットやプラグインを導入できるところまで一度に紹介することは無理がありまして、開発と銘を打ってしまいましたが、お許しください。
今後、カテゴリーを増やした際に改めて書き込みしたいと思います。
私はフリーの副業でプログラミングを楽しんでいますが、昨今WordPressだけで利益を得るのは大変難しいというか、バックエンドの技術も必要だと巷でお聞きします。 プログラミング言語もそれぞれ進化が激しいので、日々の学習は欠かせないと思います。辛いな〜と暗くならず、楽しみを見出してください。
”一芸は百芸に通ず”です。
今回なぜこの記事を取り上げたかと申しますと、ある方のサイトが壊れてしまったとのお話を聞いたのが原因で執筆しました。
公開されていないテーマを利用したとのことです。
野良のテーマは危険ですし、さりとて公開されているテーマではオリジナリティーが不十分と考えてしまう時があると思います。そんな時、色々と工夫ができるアイテムや技術があるとそれなりに楽しみながらバックエンドも含めて自己表現の機会が広がるように思います。 何事も習うより慣れろといいます。全体の流れがつかめれば失敗を繰り返しながらでも人は進化を続けます。
是非、遊び心で取り組んでみて欲しいと感じました次第です。
2019年7月13日 Chockey
