CSS何もわからないマンです。

WordPressで会社のHP運営している方々はいっぱいいらっしゃると思いますが、だいたい困ることが、あとからページを追加しようとしたときに、header.php、footer.phpやcss、jsがぐちゃぐちゃになることが多いかなと思います。

いつかリファクタ、または作り直すとかすると思いますが、大体が急ぎーとか来週にはあげたいーとか自分の仕事が忙し〜だと思うので、なかなか手がつけられずスパゲティな感じになるんじゃないでしょうか。

僕もまだまだですが、最初からこういうの設計にしておけばよかったなってのがWordPressにはあるので、今回はLPを題にして自分のためにもメモしていこうと思います。

固定ページのtemplateを用意する

同じpage.phpを使いますと条件分岐地獄がまっていますので、できれば分離したいです。

WordPressには固定ページのテンプレートを用意することができるので、分けてあげましょう。

$ cp page.php page-lp.php

管理画面から、page-lp.phpを認識させるためにコメントを用意します。

<?php
/**
 * Template Name: page-lp
 *
 * aipaが作ったものなのでaipaに連絡ください
 */

// 省略

固定ページの編集画面の右サイドメニューのテンプレート項目を確認するとセレクトボックスでテンプレートを選択できるようになります。

これでPHPファイルを分けることができます。

読み込むCSSファイルをテンプレートから指定する

分けたPHPファイルに内容を書いていきたいところですが、次に問題になるが、header.phpとfooter.phpに追記したくなる問題です。

なぜなら、CSSファイルや動的な処理を用意したならJavaScriptファイルが必要になるからです。

固定ページの編集画面にinlineで用意しても良いと思います。今回はLPなので良いですが、例えば2ページ以上同じテンプレートを使い回したいなどの要望があるなら、ページごとに追記していくのは面倒です。

よくやってしまうのが、header.php、footer.phpで参照されているページIDなどを確認して、必要なCSSファイルを読み込むなどをやりがちかなと思います。（ぼくもそうでした）

（ちなみに、header.php、footer.phpは複数用意して、テンプレート側（post.php、page.php）から、ファイル名を指定して読み込むこともできますがそれは今回話しません）

話が長くなりましたが、要はテンプレート側から読み込みたいCSSファイルを指定できればよいのです。

というのを解決するのが、 wp_enqueue_style です。

こいつを使うと、header.phpのコードの wp_head() 関数実行時に、 wp_enqueue_style で詰めたCSSファイルを読み込む <link> タグを返してくれます。

例えば、今回の場合だと、 lp.css ファイルを用意したので、そいつの <link> タグを作成してくれるようにテンプレート側で記載すればおｋです。

<?php
/**
 * Template Name: page-lp
 *
 * aipaが作ったものなのでaipaに連絡ください
 */
wp_enqueue_style( 'lp', get_template_directory_uri() . '/assets/css/lp/style.css');
get_header();?>

注意点として、①header.php読み込み前に実行すること、②header.phpにwp_head()関数が実行するようになっていること。です。

また、JavaScriptバージョンもあります。

さらに、こいつらには、引数に $in_footer = false とあるので、 true にすると、footer.phpで吐き出すようになります。（注意する点はheader.phpと一緒）

さらにさらに、enqueueがあるということは、dequeueもあります。

こいつを使って、CSS、JavaScriptファイルの読み込みを別PHPファイルで定義しておいて、importするような設計で初期構築すると、header.php、footer.phpでの条件分岐などが必要なく、追加するテンプレート側でファイルの読み込み／読み込まないをコントロールしやすくなるので最初から使っておくのがおすすめです。

（ちなみにデメリットに出会ったことがないので、めっちゃ運用している人でこんなのあるぞ！とかあれば教えてください)

ショートコードを使う

投稿や固定ページの編集画面で、「この記事のこのセクションで使いまわしたい処理を実行して結果を表示したい、またはよく使い回すUIを呼んで表示するようにしたい」などの要望があるかなと思います。そういうときはショートコードを設定して利用できるようにしましょう。

テーマディレクトリ以下にある、 functions.php に下記コードを追加すると、編集画面で [foo] というショートコードが利用できるようになります。

function foo_func( $atts ){
    return "";
}
add_shortcode( 'foo', 'foo_func' );

これだけ。簡単ですね。

注意点として、編集画面のコードエディタでショートコードを利用すると、憎き <p> が自動でついて邪魔してくるので、ブロックエディタのショートコードを選択するようにしてください。

ログイン後に表示されるadminバーを非表示にする

adminバーが邪魔です！！！（クソデカ声）

こいつのことです。

ぴったし！！！ってコーディング追えて、手元のデバイスで確認してみたら高さが違う？！なぜ！？Why！！？みたいことがありました。

WordPressを編集するためには、ログインして管理画面から編集しないといけないのですが（ローカルで直接いじる場合などは別です）、 <body> タグに下記HTMLを自動で差し込んでくれて、上部の高さ 32px ぐらいをとってきます。邪魔。

<div id="wpadminbar" class="nojq">

また、管理系のPluginとかも邪魔してくるので、みんな邪魔です。（管理する場合は便利です。）

（こういうのとか）

とりあえず消していきましょう。

さっそく、↑で学んだショートコードを利用していきたいと思います。

function removeAdminBar() {
	add_filter( 'show_admin_bar', '__return_false' ); // Adminバーが非表示になるコード
	return '';
}
add_shortcode( 'remove-admin-bar', 'removeAdminBar' );

はい。これでショートコードで利用することもできますし、テンプレートファイルからも関数を実行できるようになりました。

ちなみに、Pluginが入れてくる高さなどのCSSはこれでは回避できないので、CSSで戦ってください。

html {
    margin-top: 0 !importance;
}

WordPressが付与するClassを除去する

WordPressは、Page Typeごとに <body> タグに、 single　やら post やら page やらを付与してきます。こういうのがあると、既存のCSSが予想していないところにかかって、UIにズレなどが発生し、デバッグに時間がかかることがありました。

最初からこいつらが消えてくれたらいいなって、何度思ったことでしょうか

というわけで消してやりましょう。

function hogehoge( $wp_classes, $extra_classes ) {

    // 利用したいclass名を定義しておく
    $whitelist = array( 'portfolio', 'home', 'error404' );

    // $whitelistで指定したclass名だけに絞る
    $wp_classes = array_intersect( $wp_classes, $whitelist );
    return array_merge( $wp_classes, (array) $extra_classes );
}
add_filter( 'body_class', 'hogehoge', 10, 2 );

body_class でfilterを追加して、必要なClass名だけに絞ってあげましょう。

これでだいたい~~邪魔がいなくなった~~スッキリしてきたかと思います！

ゴリ押す

みんなが通る道です。

WordPressよくわからないとだいたいCSSの display: none; やら、 !importance や、JavaScriptで、 document.createElement やら appendChild などのDOM操作を行って、要望を実現しようとします（そうやってみんな基本的なCSSやJavaScriptに詳しくなっていく）

とはいえ、頑張ってもきれいに書くのが無理なページは存在する と思うので（誰も悪くないんです。時間や要望が変化するだけ（設計が悪い場合もある））、最後はゴリ押ししてあげましょう。

あとは既存ページのCSSとの打ち消し合いや動的構築のバトルです。

#header, #footer {
    display: none !importance; /* 既存のheaderとfooterが見えなくなるおまじない */
}

#top {
    padding-top: 0 !importance /* topの高さをキャンセルするおまじない */
}

JavaScriptでは、動的に消したり、追加したりすると既存を壊さずに追加することができます（多用に注意！！！！！）

const tmpMain = document.getElementById("main");
tmpMain.innerHTML = ''; // #main
tmpMain.className += ' lp';

const img = document.createElement("img");
img.src = 'hoge.jpg';
img.alt = 'ほげー';
const div = document.createElement("div");
div.append(img);
tmpMain.appendChild(div);

※またJavaScriptは脆弱性を含んじゃう可能性もあるのでやり方には注意してください

まとめ

がんばれ