WordPressのCSS拡張覚え書き

外観 > カスタマイズ > カスタムCSS
上記の方法でCSSの拡張をする訳では無くCSSファイルを追加して

外観 > テーマエディター > テーマの編集
にてCSSを管理する覚え書き。

変更するところ間違えたりするとテーマが破綻する可能性がありますので、参考にする際はバックアップ等をした上で自己責任でどうぞ。

手順1.FTPソフトやターミナルでCSSファイルを設置する

(※)/wordpress/wp-content/themes/(適用中のテーマ名)
※環境によって階層の深さは異なる

CentOS7だと

/usr/share/nginx/(ドメイン等)/wordpress/wp-content/themes/(テーマ名)

大体デフォルトで構築している場合は上記のような感じの階層にある
そこに任意の名称のCSSファイルを設置する(当ページで扱うのはapend.css)

手順2.header.php編集

ここでは全ページに反映させるheader.phpの編集を行います
一部ページだけの場合は他を検索して下さい

WordPressにログイン
外観 > テーマエディター > テーマの編集
テーマファイル欄に手順1で追加したCSSファイルがある事を確認する

テーマファイル欄のheader.phpを選択し編集を行う
変更(追記)は次の通り

<head>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/apend.css" type="text/css" />
</head>

使用テーマによって異なるがheadに1行追記(apend.cssはファイル名に合わせて変更)
複数のCSSファイルを扱う場合は同様に追記する

以上で実装完了
あとはテーマの編集で編集作業をすることでカスタムCSSではなく独自に用意したCSSファイルにてWordPressの編集が行えるようになる

実装結果

トップページへ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください