ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

プラグインなし WordPress 記事ごとにCSSスクリプトを実装する

, , , ,

個別記事にcssのコードを埋め込んでみたいと思います。
関連記事

 
Advanced Custom Fieldsを使っていますが、普通のカスタムフィールド機能でもいけると思います。
 

カスタムフィールドの設定

テキストエリアのフィールドを作ります。
フィールド名・・・「css」
フィールドタイプ・・・テキストエリア
改行・・・なにもしない
カスタムフィールドの設定
 

single.phpを編集

投稿記事のテンプレートファイルを編集します。

css

ループ開始直後あたりにこれを書きます。

<style type="text/css"><?php the_field("css"); ?></style>

 

それでは、実際に記事投稿画面から入力してみます。

 

動作サンプル

記事投稿画面を開き、まずはコードエディターのブロックにサンプルのタグを入力します。
<p class="jugemu">じゅげむじゅげむ</p>

 

cssの例

カスタムフィールドのcssにこのように入力してみます。

cssコードの例
.jugemu{ color: pink; }

文字がピンクになりました。↓

じゅげむじゅげむ

プラグインなし WordPress 記事ごとにCSSスクリプトを実装する #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #カスタムフィールド #ACF #AdvancedCustomFields #スクリプト

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。