Wordpress プログラミング

WordPressの自作テーマ作成への道 -1- (準備〜テンプレートファイル)

投稿日:

概要

WordPressのテーマを1から作成するノウハウをまとめていく。

背景としては、WordPress関連のお仕事が増えてきたため。

今回は、自作テーマ作成の準備をまとめる。

準備編

今回はサクッとXAMPPで開発環境を作り、WordPressをインストールしています。

XAMPP
https://www.apachefriends.org/jp/

WordPress本体のダウンロード
https://ja.wordpress.org/

テーマを作る対象を確認する

下記パスに「themes」フォルダがあるか確認する。
wordpress – wp-content – themes

自作テーマフォルダを作成する

「themes」フォルダが確認できたら、そこへ自作テーマフォルダを作成する。

※今回は「jet-theme」を作成する事として進める。
wordpress – wp-content – themes – jet-theme

先に必要なフォルダの作成

「jet-theme」フォルダの中に「css」、「images」フォルダを新規作成する。

自作テーマの設定を記述する

「jet-theme」フォルダの中に「style.css」ファイルを新規作成する。

「style.css」に下記コードを記述する。

@charset "UTF-8";
/*!
Theme Name: [テーマ名]
Theme URI: [テーマ配布URI(URL)]
Description: [テーマの説明]
Version: [バージョン]
Author: [作者名]
Author URI: [作者のURI(URL)]
*/

動作確認

「jet-theme」の中に「index.php」ファイルを新規作成する。

「index.css」に下記コードを記述する。


<?php get_header(); ?>

<?php bloginfo('name');>

<?php get_footer(); ?>;

※「get_header();」、「get_footer();」が無いと動かない

※「bloginfo」関数は、パラメータに応じてブログ情報を返す。
パラメータに関しては、リンク先のWordPressのテンプレートタグ参照

style.cssを読み込む

自作テーマのcss/style.cssをPHPで読み込む場合は下記を追記する。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); >/css/style.css" type="text/css" />

 

 

テンプレートファイル

テンプレートファイル名(一部)

テンプレートファイル名 概要
front-page.php Webサイトのトップページを表示
single.php 投稿の記事ページを表示
page.php 固定ページを表示
category.php カテゴリーページを表示
search.php 検索結果ページを表示
archive.php 記事一覧を表示
404.php 404エラーページ表示

トップページのテンプレート階層

優先順位 テンプレートファイル名 備考
1 front-page.php
2 固定ページ表示ルール 「設定」→「表示設定」の「フロントページの表示」が「固定ページ」
に設定されている場合に表示
3 home.php
4 index.php

-Wordpress, プログラミング

執筆者:

関連記事

JavaScript(Node.js)を使った画像ファイルのBase64エンコード

Base64とはなんだろう BASE64エンコードとは、英数字64種類のみを用いたデータ変換手法です。 エンコード後のデータ量は、エンコード前の約3割り増しです。 かんたんに言えば、バイナリデータをテ …

JavaScriptライブラリまとめ

クライアントサイドのフレームワーク AngularJS・・・MVC(Model-View-Controller)を実現 React・・・Viewのみを実現 React-Native・・・ Knocko …

WordPressの自作テーマ作成への道 -2- (テンプレートタグ)

テンプレートタグとは WordPressが標準で用意してくれているPHP関数群のこと ※bloginfo()などが当たる プログラミング言語である、PHP言語の知識が必要になる WordPress & …

[Node.jsのVersion管理]Homebrew+nodebrew+Node.jsのインストールと初期設定(macOS)

目次Homebrew(brew)インストール動作確認nodebrewインストール動作確認設定PATHの設定コマンド一覧Node.jsインストール動作確認初期設定対象プロジェクトフォルダに移動プロジェク …

[Node.jsのVersion管理]nodist+Node.jsのインストールと初期設定(Windows10)

目次nodistダウンロードインストールコマンド一覧Node.jsインストール動作確認nodistコマンドの確認nodeコマンドの確認npmコマンドの確認初期設定対象プロジェクトフォルダに移動プロジェ …