AFFINGER6で記事ごとに個別CSSを設定するカスタマイズ

カスタマイズをする際にスタイルシートを使ってカスタマイズをすることは多いと思います。

AFFINGER6のCSSについては「AFFINGER6｜スタイルシート（style.css）を編集する時の注意点について」で解説しています。

スタイルシートの使い方

トップページや固定ページなど、個別でCSSを当てるには様々な方法があります。

もちろんネットで検索しても出てきます。

  • プラグインを使う
  • function.phpへ記述する
  • 記事に直接埋め込む

最近人気のWordPressテーマである「SWELL」や無料の「Cocoon」には記事の下にCSSを直接記入できる欄があります。

SWELLのCSS記述欄

この機能はとても便利で、ネットでもたくさん情報は落ちているんですが、少し古かったりエラーが出たりと様々でした。

そこでAFFINGER6でも同じように設定できるように「AFFINGER6用のカスタムCSS欄」をコーディングしてみました。

記事用にCSS欄を設置しておけば、サイト全体に反映されるCSS（外観＞テーマファイルエディター＞style.css）とは違い、無駄に読み込まなくてよくなるので結果的にサイト速度が改善されます。

個別CSSの用途

  • トップページのカスタマイズ
  • お知らせやプライバシーポリシーなど固定ページ
  • カスタマイズを紹介する記事

それぞれのカスタマイズに使うことができて、トップページは「オリジナル見出し」や「オリジナルボタン」など、CSSをあてることができてカスタマイズを紹介する時も、そのページのみで紹介することができます。

カスタマイズ方法はコピペで簡単に実装できて、AFFINGER6でエラー表示がないようにしています。

また、SWELLと同じようにJavaScript用の記入欄も作りました。

ページ単位でカスタマイズできるので、オシャレなのにサイトの表示速度を落とさずカスタマイズできます。

注意

このサイトのテンプレートや記事は購入者限定で配布しているものです。

自身のサイトでのコードの開示やブロックの再配布等を固く禁じます。

違反者が見つかった場合は所定の対応と当サイトを即時閉鎖いたしますのでご容赦ください。

AFFINGER6個別CSS欄を作るカスタム

実際のCSS、JavaScript欄は上記のように設定しています。

記事の下にそのページのみに適用する欄を作成しました。

こういったカスタマイズ自体はネット上にたくさん落ちていましたが、どれを試してもAFFINGER6ではエラーが表示されたり、ページ遷移の際に無駄なファイルが表示されてりしていたので、確実に使えるようにコーディングしています。

今後のサイトカスタマイズでも非常に便利なので、是非使ってみてください。

設定方法

それぞれ設定方法はfunction.phpへの記述になります。

「外観」＞「テーマファイルエディター」＞「function.php」

記述は「子テーマ」にします。

子テーマに記述する理由は「親テーマがアップデートされた際に記述したコードが消えるから」です。

また、不具合があった場合も子テーマを入れ直せば解決します。

この中のテーマのための関数（function.php）に以下のコードをコピペしてください。

AFFINGERCSS用コード

// AFFINGER6投稿画面にカスタムCSSを追加
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post',  'save_custom_css');
add_action('wp_head',    'insert_custom_css');

function custom_css_hooks() {
	// AFFINGER6投稿ページ編集画面用
	add_meta_box('custom_css', 'AFFINGER CSS', 'custom_css_input', 'post', 'normal', 'high');
	// AFFINGER6固定ページ編集画面用
	add_meta_box('custom_css', 'AFFINGER CSS', 'custom_css_input', 'page', 'normal', 'high');
}

function custom_css_input() {
    global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="' . wp_create_nonce('custom-css') . '" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">' . get_post_meta($post->ID, '_custom_css', true) . '</textarea>';
}

function save_custom_css($post_id) {
	if ( ! isset( $_POST['custom_css_noncename'] ) ) return $post_id;
    if ( ! wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}

function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : 
            while (have_posts()) : the_post();
                echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
            endwhile; 
        endif;
        rewind_posts();
    }
}

こちらのコードを入力すると「AFFINGER CSS」が追加され、ページに直接CSSを入力することができるようになります。

AFFINGERJavaScript用コード

// AFFINGER6投稿画面にカスタム js を追加
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post',  'save_custom_js');
add_action('wp_footer',  'insert_custom_js');

function custom_js_hooks() {
	// AFFINGER6投稿ページ編集画面用
	add_meta_box('custom_js', 'AFFINGER JavaScript', 'custom_js_input', 'post', 'normal', 'high');
	// AFFINGER6固定ページ編集画面用
	add_meta_box('custom_js', 'AFFINGER JavaScript', 'custom_js_input', 'page', 'normal', 'high');
}

function custom_js_input() {
    global $post;
    echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="' . wp_create_nonce('custom-js') . '" />';
    echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">' . get_post_meta($post->ID, '_custom_js', true) . '</textarea>';
}

function save_custom_js($post_id) {
	if ( ! isset( $_POST['custom_js_noncename'] ) ) return $post_id;
	if ( ! wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_js = $_POST['custom_js'];
    update_post_meta($post_id, '_custom_js', $custom_js);
}

function insert_custom_js() {
    if (is_page() || is_single()) {
        if (have_posts()) : 
            while (have_posts()) : the_post();
                echo '<script>' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
            endwhile; 
        endif;
        rewind_posts();
    }
}

こちらのコードを入力すると「AFFINGER JavaScript」が追加され、ページに直接CSSを入力することができるようになります。

それぞれすでに記述があるコードの下にペーストすれば問題ありません。

固定ページと投稿ページでCSSを使うことができます。

実際の使い方

実際にいくつかこのページで使ってみたいと思います。

簡単な例なので、自分でもいろいろ試してみましょう！

ふわふわボタン

ふわふわぼたん

ふわふわボタンはCSSを当てたい要素に追加クラスを与えます。

fuwafuwaを与えるとふわふわします。

高度な設定＞追加 CSS クラスに上記のクラスを入力します。

場所はブロックの下の方のにあります。

ページのCSSに以下のコードをコピペするとアニメーションを付与できます。

.fuwafuwa {
animation-name:fuwafuwa; /* アニメーション名 */
animation-delay:0s; /* アニメーションの開始時間 */
animation-duration: 2.5s; /* アニメーション動作時間 */
animation-timing-function: ease-in-out; /* アニメーションの動き（徐々に早く）*/
animation-iteration-count: infinite; 
}
 
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px); /* アニメーション上下の動き */
}
100% {
transform: translateY(0);
}
}

アニメーション以外にもCSSで出来ることならすべて付与することができます。

どきどきボタン

どきどきぼたん

こちらも設定方法は同じです。クラスはdokidokiです。

.dokidoki{   
animation-name:dokidoki;	/* アニメーション名の指定 */
animation-delay:0s;		/* アニメーションの開始時間指定 */
animation-duration: 3s;	/* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;
/* アニメーションの動き（徐々に早く徐々に遅く）*/
animation-iteration-count: infinite; /* アニメーションをループさせる */
}
@keyframes dokidoki {
0% {
transform: scale(1);
}
40% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
60% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
:root {
    --accent-color: #353535;
}

単独ページでしか使用していないCSSはサイトの表示スピードを下げたりします。

これらの方法でこのページだけこのCSSを実現することができるので、設定してみてください。

カスタマイズは自己責任で！

カスタマイズはこだわると悩みがつきません。

PHPなどをバックアップを取らずに変更してしまうと、取り返しのつかないこともあるので注意しましょう。

注意

このサイトのテンプレートや記事は購入者限定で配布しているものです。

自身のサイトでのコードの開示やブロックの再配布等を固く禁じます。

違反者が見つかった場合は所定の対応と当サイトを即時閉鎖いたしますのでご容赦ください。

-カスタマイズ

PAGE TOP