Wordpressのテーマを作るのって、要点を掴んでしまえば、比較的簡単にできちゃうんですよ。
そして、Wordpressのテーマは、表示されるデザインをセットするだけのように思っている人もいるようですが、
基本的にWordpressは、テーマだけで、Webページのほぼ全ての事をコントロールできてしまうので、専用のテーマを作れば基本的には納品までできてしまうという荒業も可能ですが。
でも実際には、投稿ページや固定ページなどとの組み合わせや、Wordpressのシステム設定を組み込んだりしなければいけないので、そうした場合の必要最低限のやり方を覚えてしまえば、
１ページものの、ランディングページだけじゃなく、仕事における複数ページあるようなカンパニーページなどであれば、サクっと構築して納品までできてしまいます。
とりあえず、今回はカンパニーページを作る場合のカンタンパターンを解説したいと思います。
簡単にテーマを作ってみる
まずは、テーマを作って、管理画面で選択してみましょう。
1. テーマフォルダの作成
下記の階層の下に、自作するテーマのフォルダを作りましょう。
Local Sites/app/public/wp-content/themes/
デフォルトで３つほどのテーマがインストールされているんですが、自分のテーマを作ってしまったら、これらは削除してしまっても問題ありません。
とりあえず、今回は、「kantan」というテーマの名称で、フォルダ名も同じ様にしてみます。
2. ファイルを設置してテーマを作成
作ったkantanフォルダの中に、index.phpとstyle.cssを作りましょう。
中身は以下のようにします。
<?php
@charset "UTF-8";
/*!
Theme Name: Kantan Wordpress
*/
上記２ファイルが表示できたら、Wordpress管理画面でテーマ選択の画面を見てみましょう。
英語表示になっている場合は、Appearance - Themes をクリックしてください。
このように、Kantanテーマが表示されていると思います。
※表示されない場合は、index.phpとstyle.cssの設置が間違っている可能性があるので、確認してみてください。
ファイルそれぞれの解説と作り込み
上記の簡単に記述したファイルを２つ作るだけで、テーマ選択に表示できる事がわかれば、あとは、その中身を作り込んでいけば、最終的にはホームページが出来上がってしまいます。
この２つのファイル（他にもいくつか重要なファイルが登場しますが・・・）について、内容を理解して、効率よく作り上げていきましょう。
style.css
このファイルは、テーマの色々な情報を登録するためのファイルと、デフォルトのstylesheetファイルの役割を果たします。
ページ全体のcss記述をこのファイルで行ってもいいですが、効率の良い開発をしたい場合は（自分の場合ですが・・・）、@importを使って、外部にcssファイルを作ってそちらを作り込む構成にしています。
とりあえず、今回は、このstyle.cssを作り込んでテーマに関する情報を作ってみましょう。
上記では、一番短い書き方で登録しましたが、情報をちゃんと登録したい場合は次のように記述します。
@charset "UTF-8";
/*!
Theme Name: Kantan Wordpress
Description: カンタンWordpress
Version: 1.0.0
Author: 開発者名
Author URI: http://example.com
Company: 所属会社
Create: 2023.01.01
*/
上の段は、管理画面に表示される必要最低限の内容になります。
下の段のように、付随する情報などは、好きに書き込んでもらってもいいです。
phpやnginxなどの開発時のバージョンや、ライセンス、そういう情報を書いておくとその後の改修作業の時の目安になっていいでしょう。
あと、screenshot.pngという画像ファイルを設置すると、管理画面のテーマ一覧でその画像が表示されるようになります。
試しにこのブログのアイキャッチ画像をいれてみました。
出来上がったwebサイトのスクリーンショットを入れておくと、後ほど見た時にわかりやすくなるので、とりあえずダミー画像をいれて作業を続けましょう。（別に無くても問題はありません）
index.php
Wordpressテーマで表示の最初に読み込まれるのが、このindex.phpです。
基本的には、この中は、通常のホームページのindex.htmlの記述をすることで、そのまま表示されるようになります。
ですが、固定ページやブログ投稿ページなどのデータと連動して表示するために、Wordpress特有の書き方をしなければいけないので、内容については、次回以降に詳細を説明していきたいと思います。
あとがき
テーマを作る事自体は、簡単に出来てしまうことがわかってもらえたら、今回のカンタンWordpress学習はバッチリ成功です。
もちろん、これで終わりではなく、ここからの作り込みも重要になるので、しっかりと学習を続けていきましょう。
少しでも「難しい」という感覚がなくなってもらえると、この資料を作った意味があると思うので、もし難しく感じる点があれば、ご意見もらえると大変うれしいです。
0 件のコメント:
コメントを投稿