• WordPress

    【WordPressオリジナルテーマ作成記録①】 ページを表示させる

    作成記録として書いていくことにしました!

    macOSでMAMPをインストールしローカル環境を構築。

    以前MAMPってなんだろう?って思ってQiitaで書いた記事はこちら

    wordpressをインストールした時にMAMPもインストールしたけど、MAMPって…?

    環境の構築については省略し、ローカル環境でページを表示させるまでを書く上で

    • ローカル環境が構築済み
    • HTMLとCSSでページが完成されていること(トップページ:index.html,スタイルシート:style.css)

    を前提とし、完成は上記のサムネイルで表示されているものとします。

     

    WordPressのディレクトリ構成

    まずはWordPressが一体どんなもので構成されているのかということを理解しないといけない。

    ダウンロードしたWordPressの中には

    • wp-content
    • wp-admin
    • wp-includes

    という3つのディレクトリ(フォルダのこと)とその他複数のファイルが存在。

    それぞれに役割があるのですが、とりあえずディレクトリの役割については下記の通り。

    wp-content
    wordpressのテーマやプラグイン、画像などのデータが入っているフォルダ。
    wp-contentの中のthemesディレクトリにテーマを作成していく。

    既存テーマもここに入っている。

    wp-admin
    wordpressの管理画面に関するファイルなどのデータが入っているフォルダ

    wp-includes
    wordpressシステム全体に関するデータフォルダ

     

    サーバーへのドキュメントルートは

    アプリケーション→MAMP→htdocsとなっているので、

    ダウンロードしたWordPressディレクトリはhtdocsの中に配置する。

     

    テーマディレクトリを作成し最小限のファイル構成を組む

    以下ディレクトリ

    application
    ∟MAMP
    ∟htdocs
    ∟wordpress
    ∟wp-content
    ∟themes

    このthemesディレクトリ内に、作成するテーマのディレクトリを新規作成

    今回はポートフォリオを作りたいのでportfolioという名前のディレクトリを。

    WordPressにテーマを認識させるには

    • index.php
    • style.css

    この2つのファイルがテーマディレクトリportfolioの直下にあれば、テーマとして認識される。

    元々作っていたindex.htmlをindex.phpにリネームで良し。

    (もしくはindex.htmlの内容をコピーしindex.phpに貼り付け)

     

    さらにstyle.cssファイルの冒頭部分ヘッダーコメントと呼ばれるテーマについての記述をしておく。

    Theme name : テーマの名前
    Theme URI : テーマのURI(URL)
    Description : テーマの説明 例)オリジナルポートフォリオテーマ、など
    Version : バージョン x.x or x.x.x で記入  例)1.o or 1.0.0 など
    Author: 作った人の名前
    Author URI: 作った人の URL
    License: ライセンス
    License URI: ライセンスの URL

    などですが、全て記入しなければいけないわけではないが、

    Theme nameくらいは記入しておいたほうがいい。

    これらの情報がないと、WordPressのダッシュボード画面からテーマを選択するときに、なんのテーマなのかわからなくなってしまうから。

    ヘッダーコメントを/*と*/で囲んで

    こんな感じでcssファイルに記述。

    +αとしてindex.htmlで表示させていた画面をスクリーンショットしておいて、

    portfolioディレクトリ直下にscreenshot.pngという名前で保存。

    するとその画像がテーマ選択時にサムネイルとして表示される。

     

    次はWordPressの管理画面からこのテーマを選択して適応させる。

     

    WordPressのダッシュボードからテーマを選択

    WordPressのダッシュボードから外観→テーマの画面へ。

    既存テーマも表示されるが、自分が作成したテーマも表示されているので

    portfolioテーマにカーソルを合わせると”テーマの詳細”と出るのでクリック。

    するとテーマの詳細画面がこんな感じで表示される。

     

    screenshot.pngという名前で保存した画像はサムネイルとなって表示され、

    ヘッダーコメントにて入力したものが、サムネイルの右側に表示されている。

    有効化ボタンでテーマが適応されるので、ポチッ。

    これでひとまず画面が表示されるかなぁと思いきや!

    index.phpファイルにはstyle.cssが読み込まれていない為、

    画面の表示はCSSが反映されていないHTMLのみのページが表示される。

     

    画像も表示されていない。

    ではどうやってindex.phpにCSSを反映させるのか?画像の表示は?

    これについては次の記事で書いていく。