WordPressのテーマCocoonでスタイルシートをカスタマイズ

サイトの紹介と使い方動画


created: 2021/07/20 modified: 2021/09/14

環境
さくらインターネット VPS
レンタルサーバでも同じだと思います。

カスタマイズするファイル
get_stylesheet_uri()関数でパスを取得するので、現在使っているテーマのディレクトリになります。
Cocoonの場合
ディレクトリ: /var/www/html/wp-content/themes/cocoon-child-master/
ファイル:style.css
/cocoon-master/ にも style.css が存在するので、注意してください。
/cocoon-child-master/の style.css はほとんどまっさらで、view サイズごとのCSSの振り分け記述も用意されています。
カスタマイズは、基本的にファイル最後部から行います。

ファイルの編集
「ダッシュボード」⇨「外観」⇨「テーマエディタ」で編集するテーマを Cocoon Child にして「選択」します。
Style.css を選択して編集します。

ヘッダ編集
「ダッシュボード」⇨「外観」⇨「テーマエディタ」でヘッダ(<head>~</head>)を編集するファイルを選択してください。(ファイルの選択に結構悩みました。テーマ毎にgoogle検索を参考にすればいいと思います。)
テーマ cocoon の場合は、編集するテーマを Cocoon Child にして「選択」して、tmp-userのhead-inset.phpを選択しました。
ファイルの最上部に次の行を追記しました。
<link rel=“stylesheet” href=“<?php echo get_stylesheet_uri(); ?>” type=“text/css” />
ファイル名を確認するために、上の行の下に<?php echo get_stylesheet_uri(); ?>を加行するとブログにファイル名が表示されます。

メールアドレス:

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました