WordPressテーマ〜(1)テーマ作成の準備

lecture

ここではWordPressのオリジナルテーマを作成の方法を解説します。

スポンサーリンク

必要なファイル

  • index.php 
  • style.css (お決まりの呪文を入れる)
  • 必須ではありませんが、ページのスクリーンショットを用意(screenshot.png) サイズ300×225ピクセル

以上のファイルをWordPressのあるフォルダ内のthemesフォルダにアップロードします。通常は以下の階層です。
wordpress/wp-content/themes/

スタイルシートのコメント

@charset “UTF-8”;の下に次に内容を記述します。

  • Theme Name:テーマの名前(必須)
  • Theme URI:テーマのURL
  • Description:テーマの説明
  • Author:テーマの作者
  • Author URI:作者のURL
  • Version:テーマのバーション
  • Tags:テーマにつけられたタグ
@charset "UTF-8";
/* Theme Name: なんちゃってクッキング
Theme URI: https://itstudio.co
Description: なんちゃってクッキングのテーマ
Author: Meiko NIshikado
Author URI: https://itstudio.co
Version: 1.0.0 */

テーマの設定

テーマの設定はダッシュボードの外観で行います。
theme1

テーマ有効後にはリンク切れの状態になります。
linkmiss

CSSと画像のリンクが切れた状態になります。これは相対パスがそのまま使用できないためです。
そのためパスを記述し直します。

CSSファイルのリンク方法

cssのリンクは次のように記述します。

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

少し前まではbloginfoを使用していたのですが、非推奨となっています。
次の記述はしないようにしましょう。(ちょっと前の参考書はすべてこの書き方ですが・・)

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">

画像のパスを修正

画像のパスも切れてしまいます。次のように記述します。

<img src="<?php echo get_template_directory_uri(); ?>/images/rect.jpg" alt="四角形の図">

こちらもbloginfoを使用しないようにします。次の記述はしません。

<img src="<?php bloginfo('template_url'); ?>/images/rect.jpg" alt="四角形の図">

*後ほど説明に出てくる予定ですが、子テーマの場合、get_bloginfo(‘template_url’)は親テーマのディレクトリのURLを返しますので子テーマのディレクトリは echo get_stylesheet_directory_uri()を使用します。

タイトルとURLをコピーしました