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, プログラミング

執筆者:

関連記事

Python関連のリンク集

  目次公式リファレンスコーディング規約開発ツールAPI人工知能 公式リファレンス Python Python3 ドキュメント Python3 標準ライブラリ PyPI 外部ライブラリ &n …

WordPressのインストール

1.概要 ローカル開発環境で構築したLinuxサーバーにWordPressをインストールする方法を記載する。 2.目次 目次1.概要2.目次3.前提条件4.事前準備5.WordPressインストール6 …

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

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

WordPressに自作CSS/JavaScriptを読み込む方法

WordPressのプラグインなどを作成する際に、 自作のCSS/JavaScriptファイルを読みこませる方法 例えば 自作CSS : [変更対象テーマのディレクトリ]/css/myCSS.css …

PHPでデータベース(MySQL or MariaDB)に接続する時の注意点

目次概要APIそれぞれの特徴と注意点参考リンク最後に 概要 PHPからデータベース(MySQL or MariaDB)に接続する際に、ネット上には色々な情報が錯綜しているのでまとめる。 API PHP …