1
/
5

Wordpressに完全自作テーマを認識してもらえなかったのでメモ

Wordpressに完全自作テーマを認識してもらえなかったのでメモ


Wordpressは静止的なサイトとは違い動的なサイトです。そのためただhtmlファイルを作る

だけでは作ったテンプレートをテンプレートとして表示できません


Wordpressならではの決まりがあり、ちょっとはまったので今回記事にしたいと思います


【前提】

何かのテーマを継承しているものでなく、今回作成するのは完全自作のテンプレート

Xampp環境にWordpressをインストールしてあること

今回本番環境でしっかり動くかのテストのためXamppでローカル環境を作りそこでテストし

ます


【テンプレートで絶対必要なもの】

Wordpressではstyle.css とindex.phpというファイルが必ず必要です

任意の名前ではなくこのファイル名にしましょう


初めはcssファイルの名前を任意の名前にしていたので表示できませんでしたw

また、絶対index.phpがないといけないということも知らなかったのでindex.htmlファイル

を表示させようとがんばっていましたw


そしてこれらの最低限必要なファイルは同じディレクトリ内に保管しておくのが基本のよう

です

style.cssをcssフォルダーに入れて保管していたのですが、それだとスタイルシートがあり

ませんというエラーが出てテンプレートとして認識してくれませんでした

同じディレクトリ内に入れると解決したので、必要なファイルあるはずなのに!!という方

は各ファイルの置いている場所を確認するとよいと思います


そしてこれらのファイルを保管するフォルダーはアルファベットの小文字で名前をつけます


【今回の手順】

サイトTopページのテンプレート化の話をします


まずサイトのラフ案を作成

それを元にhtmlを作成

作成したhtmlファイルをphpファイルにパーツわけ


と、言う手順を踏んでいます


【作業】

まず、index.htmlの拡張子をphp に変更し、cssのファイル名をstyle.cssにして同じフォル

ダーに入れます

cssファイルに以下のコメントを書き足します

/*

Theme Name: テーマの名前(ファイルを格納しているフォルダー名)

Theme URI: テーマを紹介しているページアドレス

Description: テーマの説明

Version: バージョン

Author: テーマを作った人の名前

Author URI: テーマを作った人のURL

License: ライセンス

License URI: ライセンスを確認できるURL

Tags: タグ

*/


配布する場合はきちんと書かないといけないですが、自分だけ使う場合はたぶんテーマ名を

フォルダー名にしておけば大丈夫だと・・・思います・・・



それをWordpress のテンプレートを入れている階層に移動します

私の場合ここです


C:\xampp\htdocs\wordpress\wp-content\themes


ブラウザでhttp://localhost/wordpress/wp-admin/へアクセスして外観から作成したテーマ

がテンプレートとして認識されていることを確認します


有効化を押して実際に有効化し、プレビューしてみる


この場合まだ、cssはきいてないし写真も表示されないはず


Wordpressの場合パスは絶対パスでなければならない

スタイルシートを読み込む場合

<link rel="stylesheet" href="<?php echo getstylesheet uri(); ?>" media="screen">


画像を読み込む場合

<link rel="shortcut icon" href="<?php echo gettemplate directory_uri(); ?

>/images/画像名">


この状態で一応意図したhtmlファイルは表示されているかと思います(よかった~)

しかしこれではすべてhtmlに手入力で変更内容を書かないと記事を更新できません

なのでこれからindex.php をパーツごとに分けて、さらに関数を使って投稿された記事を自

動で表示できるようにする作業をしなければなりません

何かのテーマを継承している子テーマを作るのなら作業少なくてよさそうですが、1から自分でとなると意外と作業量が多いんだな~と思いました

株式会社アクシスでは一緒に働く仲間を募集しています
5 いいね!
5 いいね!
今週のランキング