style.cssのテーマ詳細[bloginfo(‘stylesheet_url’)]

2016年6月16日

テーマを一から作成する 第2回目

 

前回はindex.php及びstyle.css、screenshot.pngを準備したので、今回から具体的な中身を記述していきます。

 

第1回目 テーマを一から作成する[index.php][style.css]

 

スポンサーリンク

 

 

まずはstyle.cssのテーマ詳細から。

 

style.cssに以下のようにコメント形式でテーマに関する情報を記述をすると、WordPressのテーマとして反映されるようになります。

 

/*
Theme Name: テーマの名前(必須項目)
Theme URI: テーマのアドレス
Author: 作成者
Author URI: 作成者のアドレス
Description: テーマの説明
Version: バージョン
License: ライセンス
License URI: ライセンスのアドレス
Tags: テーマのタグ
*/

 

今回はTheme Nameのみを記述しておきます。

 

 

Theme Name は 外観>テーマ で表示される「有効:〇〇」の〇〇部分に反映されます。

Theme Name

 

 

次にindex.phpとstyle.cssを記述していきます。トップ画面は以下の画像のような画面になります。

 

サンプル

 

index.php

 

style.css

 

 

index.phpの説明

 

5行目・6行目の<?php bloginfo(‘name’); ?><?php bloginfo(‘description’); ?>には、WordPress管理画面の 設定>一般 画面において入力してあるタイトルとキャッチフレーズが出力されます。

 

タイトル・キャッチフレーズ

 

7行目

<?php echo get_stylesheet_uri(); ?>で、作成したスタイルシート(style.css)にリンクを貼っています。

 

 

以上でトップ画面を表示させることができました。

 

次回はこのindex.phpを分割していきます。

第3回目 header/saidebar/footerに分割する[wp_head][wp_enqueue_style]

 

 

参照ページ


 

HTMLとCSSは以下サイトを参照させて頂きました。

ほんっとにはじめての HTML5 と CSS3
[17-1] HTML5の新要素でページ全体を組もう

 

WordPress

Codex日本語版
テーマの作成

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー