Wordpress

WordPressテーマ作成で初心者(過去の自分)が間違えてた事

昔、自分の作ったテーマを見て発狂しそうになったので、皆様には同じ間違いを行わないよう記事にします。

スタイルシートファイルやJavascriptファイルの読み込み記述をheader.phpに書いてしまう

これは本当に駄目。拡張性がなくなります。

WordPressは現在なんのライブラリ(jQueryなど)を使用しているか把握しており、プラグインはそれを参照し作成しているので、もしどんなライブラリが使われているかわからない状態になると、不具合が出てきたりします。(よくあるのがjQueryの二度読みとか)

JSの読み込みはfunctions.phpの”wp_enqueue_scripts”を使いましょう

function scripts() {
  $url = get_template_directory_uri();
  if(!is_admin()) {
    wp_enqueue_style( 'theme-style', "$url/css/bootstrap.css" );

    wp_enqueue_script('theme-script', "$url/js/main.js", ['jquery'], NULL, TRUE);
  }
}
add_action( 'wp_enqueue_scripts', 'scripts' );

リンクを”/hoge”って書いちゃう

<a href="/hoge">hoge</a>

これはWordpressの場合あまりよくないです。シッカリと”home_url”を使いましょう

<a href="<?= home_url("/hoge"); ?>">hoge</a>
なぜか

神 < いやぁ、ドメイン直下でなくて、フォルダでWP動かしたかったんだよね~

< フォルダ分けしたテスト環境で動かないんですけど?

普通によくあります。

詰めれていない自分の責任でもあるのですが、「そんなことも有ろうかと!」って実装してると、評価バク上がりです。

ナビゲーションがWordpressのメニューから変更できない

グローバルナビゲーション、フッターナビゲーション、色々ありますが全てWPのメニューで編集できるようにしましょう

心の声「いや、グローバルナビゲーションって確定要素やからええやん!」

< いいえ、確定では無いのです。

サイト運営する中で結構変わるのがグロナビの文言、リンク先、フッターリンクの増減です。その都度テーマを更新していてはコストが掛かりすぎます(え、1文字変えるだけでxxx円!とか言われます)

新着情報をWordpress標準の「投稿」を使ってしまう

え?使っちゃだめなの?って思う人けっこう多いと思います。
ブログ以外の目的で「投稿(Post)」は使わないほうが無難です。

例えば、新着情報を実装後

< 今度ね、社長がブログするみたいで、ブログ機能追加してくれる~?

っとなった場合どうしますか?

そんなときの為にも少し面倒ですが、プラグイン”CPT UI”などを使えば一時間もあればできるので、新着情報など小さなものでもシッカリとカスタム投稿を作りましょう

archive.phpやarchive-hoge.phpなどで表示される順番を直接書いてしまう

archive.phpファイル内にWP_Queryを書いてしまうパターン

archive.phpやfrontpage.phpなどは既にWP_Queryが実行されている状態なので、もう一度クエリーを作ると2回クエリがーが実行され、更に一回目(WordPressが自動実行)が無駄になります。

こういう場合はクエリが実行される前の”pre_get_posts”アクションでWPが自動実行しているクエリーを変更しorder(順番)を変更してあげましょう

// functions.php

function custom_type_archive_display($query) {
  if (is_post_type_archive('event')) {
    $query->set('meta_key', 'date');
    $query->set('orderby', 'meta_value_num');
    $query->set('order', 'DESC');
    return;
  }
}
add_action('pre_get_posts', 'custom_type_archive_display');

こうすることで、eventのアーカイブページ(一覧ページ)だけWordpressが自動実行するクエリーの情報が変更され、クエリーが1回しか実行されずエコなシステムが出来上がります。

Gutenberg(グーテンベルク)無効にしちゃう

クラシックエディタのサポート期間は2021年末までです。それにグーテンベルクめっちゃ使いやすいです。

クラシックエディタに戻れなくなるぐらい凄い

例えば記事中に下記のような組み方をしたい場合ってあると思います。

.media
  .image: img(src="hoge.jpg")
  .text hogehoge

クラシックエディタの場合これを実現するにはショートコードを組み合わせて実現していたと思います。あれ使い難いし見た目もよくないんですよ

グーテンさんの場合、プラグインを使えば簡単にカスタブロックが作成できて、入力も簡単になります

プラグイン”Block Lab”が使いやすい

Block Lab

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ