ブログをリニューアルする際、親テーマのデフォルトCSSが邪魔になることがあります。
このブログでもデザインを一から作り直したかったので、親テーマのCSSを完全に無効化しました。
その方法を、忘れないように主に自分用の備忘録として残しておきます。
その前に注意点
この方法を使うと以下の状態になります。
- デザインが完全に崩れます。
- すべて自分でCSSを書く必要があります。
- 初心者にはおすすめしません。
こんな人は親テーマのCSSをそのままで子テーマを使って「上書き」がベストです。
- CSSに自信がない。
- デザインを少し変えたいだけ。
- そもそも時間をかけたくない。
以上、注意点でした。
無効化する方法は次の項目になります。
1. 基本：親テーマのCSSを無効化する
以下の記述を子テーマのfunctions.phpに追加すると、親テーマのCSSを読み込まないようになります。
コピペしてお使いください。
// 親テーマのメインCSSを読み込ませない
function my_dequeue_parent_style() {
wp_dequeue_style('cocoon-style');
}
add_action('wp_enqueue_scripts', my_dequeue_parent_style, 20);親テーマのCSSの読み込みタイミングより確実に遅らせるためpriorityを20にしています。
2. 人気記事ウィジェットが動かなくなる問題の対処
Cocoonでは、人気記事のアクセスカウントをCSS経由でリクエストする仕組みになっています。
そのため、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');3.WordPressデフォルトCSSもまとめて無効化
さらにスッキリさせたい人はこちらも追加。
ただし、編集画面などが崩れる可能性があるので注意です。
最近のアップデートでブロック周りが変わったので、もしかしたら動かないかも。
// WordPress標準CSSも無効化
function my_dequeue_wp_default_styles() {
wp_dequeue_style('wp-block-library'); // ブロックエディタCSS
wp_dequeue_style('global-styles'); // グローバルスタイル
wp_dequeue_style('classic-theme-styles'); // クラシックテーマスタイル（必要に応じて）
}
add_action('wp_enqueue_scripts', 'my_dequeue_wp_default_styles', 20);補足（よくあるトラブル）
CSSが反映されない
ブラウザが古いキャッシュを使っている可能性があります。
Ctrl + Shift + R を押して強制的に再読み込みしてください。
親テーマのスタイルが完全に消えない
Cocoonの読み込みタイミングによっては優先度が足りないことがあります。
add_action('wp_enqueue_scripts', my_dequeue_parent_style, 20);ここの値を20から30に変えて試してみてください。
親テーマのCSSを無効化するコードの最後とWordPressデフォルトCSSもまとめて無効化するコードの最後の各２箇所あります。
短いですが、親テーマのCSSを読み込ませない方法は以上になります。
一からCSSを書くのはかなり労力がかかります。
自分（素人）の場合、昔から趣味でサイトを作ってたとはいえトータル２週間ほどかかりました…。
軽い調整だけなら親テーマを残して上書きする方が絶対無難です！
どうしても自分でデザインをコーティングしたい人はお試しください。