WordPressでCSSを適応させる方法

筆者の環境
具体的な手順
- 必要なファイルをサーバーにアップロードする
- テーマを適応させる
style.cssを変更した時

筆者の環境

WordPressの設定ファイルを編集するには、様々な方法があると思いますが、この記事に書いてあることは、レンタルサーバー「ロリポップ！」にインストールされたWordPressの中の「ロリポップ！レンタルサーバーFTP」上でのお話です。

具体的な手順

必要なファイルをサーバーにアップロードする

「ロリポップ！レンタルサーバーFTP」にログインする

f:id:khirok:20200127220832p:plain

themesディレクトリ( / > wp-content > themes )に新しいフォルダを作成する

testというフォルダを作成しました

f:id:khirok:20200127222755p:plain

新しいフォルダの中身

・index.php

・style.css

この記事では、WordPress上でCSSを適応する方法を手軽に確認するため、この2つのみを扱います。

index.phpにテンプレートタグを追加する

<!DOCTYPE html>
　<html lang="ja">
　<head>
　　<meta charset="utf-8">
　　<title>初めてのWordpress</title>
 
　　<link rel="stylesheet" type="text/css"
 href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
　　<!-- リセットCSSを読み込んでいる -->
 
　　<link rel="stylesheet" type="text/css"
 href="<?php echo get_stylesheet_uri(); ?>" />
　　<!-- style.cssを読み込んでいる -->
 
　</head>
　<body>
　　<div id="header">
 　　header
　　</div>
　　<div id="main">
　　　main
　　</div>
　　<div id="footer">
 　　footer
　　</div>
　</body>
</html>

htmlからcssを読み込む方法とは違って、WordPress上のphpファイルからcssを読み込むには、href="<?php echo get_stylesheet_uri(); ?>という書き方をします。(他にも方法はあるみたいですが割愛します。)

style.cssにヘッダー情報を記載する

/*
Theme Name: test
Theme URI: http://testl.com/
Author: Shibata Hiroki
Author URI: http://test.com/
Description: test
Version: 1.0

*/

#header {
 height: 100px;
 width: 100px;
 background: red;
 text-align: center;
 color: white;
 line-height: 100px;
}

#main {
 height: 100px;
 width: 100px;
 background: blue;
 margin: 20px 0;
 text-align: center;
 color: white;
 line-height: 100px;
}

#footer {
 height: 100px;
 width: 100px;
 background: green;
 text-align: center;
 color: white;
 line-height: 100px;
}