皆様の事業に貢献します

WordPressの体裁はスタイルシートで設定される

スタイルシート(CSS)はWebページの外観・体裁を定義するファイルです。Webコンテンツのうち内容と外観・体裁を別々に設定した方が管理しやすいので外観・体裁の設定を独自に設定するようになりました。この体裁を設定する仕様がCSSです。詳しくは”CSS”とか”スタイルシート”でWeb検索すれば沢山解説しているページがありますので参照してください。

WordPressもCSSを使ってページの体裁設定しています。WebMatrixからWordPressで作成したサイトを開きログインし”ダッシュボード>外観>テーマ編集”開きます。

WebMatrixからサイトのログイン画面を開く

WebMatrixからサイトのログイン画面を開く

"ダッシュボート>外観>テーマ編集"を開く

“ダッシュボート>外観>テーマ編集”を開く

テーマ編集画面右下に”スタイルシート”メニューがあり”style.css”がスタイルシートとして表示されています。以前の記事でご紹介したとおりstyle.cssがWordPressのthemeのスタイルシートです。

気に入ったスタイルシートからファイルをコピー

CSS 素材“などのワードでWeb検索をすると様々なCSSが公開されていて利用することができます。CSSの勉強はこの記事のテーマではないので、公開されているCSSをそのまま使ってWordPressのthemeを作ってみます。

Pondtさんで公開されているCSSを利用させて頂く事にします。今回はtemplate_12.zipを使います。

次にtemplate_12.zipをダウンロードして適当なフォルダに展開します。中に”index.html”ファイルがありますのでこれを”index.php”の元ファイルとして利用します。以前の記事でthemeフォルダを作って”index.php”と”style.css”を作りましたが同じ要領でthemeフォルダ(no12)をつくりtemplate_12.zipの中身のうち”index.html”ファイルと”css”、”js”、”img”フォルダをコピーします。

"themes"フォルダにno12フォルダをつくり、"index.html"ファイル、"css","js","img"フォルダをコピー

themeフォルダにno12フォルダをつくり、”index.html”ファイル、”css”,”js”,”img”フォルダをコピー

“index.php”と”style,css”ファイルの作成

コピーした”index.html”の名前を”index.php”に変更します。更に”index.php”ファイルを右クリックしWebMatrixで編集します。

“index.php”の中の下の部分がスタイルシートを指定しています。

<link href=”css/base.css” rel=”stylesheet” type=”text/css” />
<link href=”css/index.css” rel=”stylesheet” type=”text/css” />

これを下の様に書き換えて、”style.css”をスタイルシートに指定します。

<link href=”<?php bloginfo(‘stylesheet_url’); ?>” rel=”stylesheet” type=”text/css” />
<link href=”css/index.css” rel=”stylesheet” type=”text/css” />

次に同じ要領で”style.css”をWebMatrixで編集します。もともとスタイルシートは”css”フォルダにある”base.css”,”index.css”ファイルなので、”style.css”の中でこれらのファイルを参照するように設定します。

具体的には下記のように記述します。

@charset "UTF-8";
/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:1.0
*/
@import url(css/base.css);
@import url(css/index.css);

サイトの表示を確認する

以上でthemeに最小限必要な”index.php”と”style.css”の準備ができました。WebMatrixから実際のサイトを表示させて確認します。

WebMatrixからWebサイトを表示

WebMatrixからWebサイトを表示

サンプルページがCSSの設定に従って体裁よく表示されました。

WordPressからサンプルページが表示された

WordPressからサンプルページが表示された

おさらいと補足

スタイルシートを指定するために

<?php bloginfo(‘stylesheet_url’); ?>

と記述しました。この記述の働きをご紹介します。

以前の記事でご紹介したように、webコンテンツにphp言語のプログラムを埋め込むことができます。この”<?php ~ ?>”というふうに囲まれた~の部分が埋め込まれたプログラムです。”bloginfo(‘stylesheet_url’);”はthemeのスタイルシートのurlを出力する働きをします。WordPressにはこのようなWebページを作るためのphpプログラム(テンプレートタグ)が沢山あります。bloginfoについて詳しくはこちらをご参照ください。

Webサイトの内容を増やす準備として次回はindex.phpをページ要素毎に分解しパーツ化します。

[smartslider3 slider=5]
ページのトップへ戻る