Cocoonの親テーマのCSSを読み込ませない方法

最近のCSSを改めて勉強し直すついでに、ブログのデザインを一から作り直すことにしました。その際に、親テーマのCSSを読み込ませないようにしたので、その方法を忘れないうちに備忘録。僕のようにCSSを全てリセットして一から作り直したい、もっとカスタマイズの自由度あげたい人向けです。

読み込ませなくすると、ブログ全体のレイアウトや装飾を一からCSSで作り直すことになります。CSSに慣れてない方にはおすすめしません！

親テーマのCSSを読み込ませなくする方法
ワードプレスのデフォルトCSSも一緒に

親テーマのCSSを読み込ませなくする方法

子テーマのfunctions.phpに以下の記述を書き足すと親テーマのCSSを読み込ませなくできます。

function my_dequeue_parent_style() {
    wp_dequeue_style( 'cocoon-style' );
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_parent_style', 11 );

このままだとアクセス集計用のCSSも消えてしまい、人気記事などが表示できなくなるので、一緒に以下の記述も書き足してください。

function add_custom_access_tracking_css() {
  if (!is_admin() && is_singular() && is_access_count_enable()) {
    ?>
    <style>
      body::after {
        content: url("<?php echo get_template_directory_uri(); ?>/lib/analytics/access.php?post_id=<?php echo get_the_ID(); ?>&post_type=<?php echo get_accesses_post_type(); ?>") !important;
        visibility: hidden;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        display: inline !important;
      }
    </style>
    <?php
  }
}
add_action('wp_head', 'add_custom_access_tracking_css');

ワードプレスのデフォルトCSSも一緒に

ワードプレスのデフォルトCSSも読み込ませないようにしたい方は。以下の記述も書き足してください。

function my_dequeue_wp_styles() {
    // WordPressデフォルトのCSSを読み込まない
    wp_dequeue_style( 'wp-block-library' ); // ブロックライブラリのCSS
    wp_dequeue_style( 'global-styles' ); // グローバルスタイルのCSS
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_wp_styles', 11 );

短いですが以上です。あとは子テーマを使って自由にデザイン！