WordPressでCSSとHTMLコーディングデータから自作テーマを作成する方法
2024/02/22
CSSとHTMLコーディングデータがあり、それをWordPressのテーマに反映させる必要があった。ちょっとしたデザインの変更であれば既存のテーマを修正する形がよさそうだけど、今回のケースだと1から作ったほうが早そうだった。その中で今後役立ちそうな部分のメモ。
目次
前提
最低限だとCSS、PHPが1ファイルずつとスクリーンショット画像のみでいけるけど、ヘッダー&フッター等の共通パーツや固定ページ用、投稿ページ用ファイルも作るものとする。
ディレクトリの作成
/wordpress/wp-content/themes/以下に適当な名前のディレクトリ作成する。テーマ名にするのが通例っぽい。今回はtest-themeとする。
メインのCSSに関して
名前はstyle.cssにする。また、そのファイルの上部に以下記述を行う。
/* Theme Name: テーマ名(今回だとtest-themeになる) Description: テーマ説明 Version: バージョン(1.0とか) Author: 作成者名 Author URI: 作成者サイトURL */
スクリーンショット画像
サイズは300 x 225pxでscreenshot.jpgもしくはscreenshot.pngの画像を用意する。
共通パーツ
ヘッダー部分はheader.php、フッター部分はfooter.php、サイドバー部分はsidebar.phpという名前のファイルを作成し中身を入れていく。
尚、注意点としてheader.phpの<head>タグ内に<?php wp_head(); ?>を、footer.phpの</body>タグ前に<?php wp_footer(); ?>を記述しておく。これを書いておかないとプラグインとかで呼び出すCSSやJSファイルなどが呼び出されなくなる。
また、他のページから共通パーツを呼び出したい場合は以下の通り記述する。
<?php get_header(); //ヘッダー?> <?php get_sidebar(); //サイドバー?> <?php get_footer(); //フッター?>
TOP / 固定ページ / 投稿ページ
TOPページはindex.php、固定ページはpage.php、投稿ページはsingle.phpという名前のファイルを作成し中身を入れていく。ざっくりとだけど共通パーツを読み込んだ上で、コンテンツを表示させたい部分に以下で出力する。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
not found
<?php endif; ?>
尚、固定ページと投稿ページを設定したら必ずどちらかになりそうなもんだけど、そうならないページが1つあった。それはWordPressのダッシュボードで「設定→表示設定→フロントページの表示→固定ページにチェック→投稿ページ」で選択したページはindex.phpが適用された。
404ページ
404.phpという名前のファイルを作成し中身を記述する。「ページが見つかりませんでした」みたいな表示でもいいし、PHPでTOPページに遷移させるようプログラムを書いてもいい。
完成
作成したファイルを全てtest-themeディレクトリにアップロードすれば完成する。WordPressnoダッシュボードから「概観→テーマ」から選択できる筈。
よく使うWordPress用関数
<?php echo home_url(); //サイトURL echo get_template_directory_uri(); //テーマを設置しているディレクトリのURL if( is_front_page() ) //TOPページだった場合 if( is_page() ) //固定ページだった場合 $post_id = get_the_ID(); //ページIDの取得
リファレンス
https://wpdocs.osdn.jp/Main_Page
その他
最初は敷居が高いかと思っていたけど実際に作るとそうでもなかった。最低限index.php / style.css / screenshot.jpgがあればテーマとして成り立つ。
今回は触らなかったけどテーマによってはダッシュボードと連携して設定を変えられたりするものもあるので、そういうのも挑戦してみたい。
関連記事
-
-
WordPress Popular Postsのサムネイルが表示されない
WordPressの人気記事を表示させるWordPress Popular Po ...
-
-
WordPressのユーザー画像とプロフィールの登録及び表示方法
WordPressでユーザー毎に画像とプロフィール部分にHTMLタグを登録したか ...
-
-
Advanced Custom Fieldsでチェックボックスの記事を取得
Advanced Custom Fieldsでチェックボックス設定しているカスタ ...
-
-
WordPressの記事公開・更新時に何らかの処理を行う方法
WordPressで記事を公開(予約公開含む)もしくは更新した際に何らかの処理を ...
-
-
WordPressで複数のカテゴリーを取得する方法(get_the_category_list)
WordPressで1つの記事に対して複数カテゴリを設定していた場合、テーマによ ...