WordPressの完全オリジナルテーマの作成方法をまとめています。
WordPressのオリジナルテーマを作成する方法を紹介していくので、参考にしてみてください。
WordPressオリジナルテーマの作り方
早速オリジナルテーマを作っていきましょう！
webサイトをデザインする
リッチなサイトは、世界中に存在します。
どんなサイトが流行っているのか、どんなデザインが用途にあっているのか考える必要があります。
まずは、サイトギャラリーサイトを見てデザインの参考にしてみてください。
オススメのガラリーサイトのリンクを載せておきます。
デザインを作成するには、adobeXDやPhotoshop,figmaなどを使用することをおすすめします。
WordPressテーマ開発環境を構築する
WordPressのテーマを開発するには、テーマを開発するための環境が必要になります。
これはレンタルサーバを借りてそこに直接WordPressをインストールして環境を作る方法がありますが、お金をかけたくない、自分のPCで完結したいという方はPC内に仮想サーバを建てる方法があります。
ローカル環境にWordPressテーマ開発環境を構築する場合
僕の知る限り、「Local」を使用するのが一番早く簡単にローカルWordPressテーマ開発環境を構築できます。
のちほど「Local」の使用方法は記事にしますが、正直説明なしでも簡単なのでインストールして試してみてください。
テーマフォルダの作成
現在執筆中です。
headでのファイルの読み込み
CSSを読み込む
「header.php」にCSSファイルを読み込むように書くことも可能ですが、あまりごちゃごちゃさせたくない場合は「functions.php」に記述することをおすすめします。
「functions.php」は読み込み関係から出力の処理などをまとめておけます。
下記記事では、「functions.php」でCSSを読み込む方法を紹介しています。
https://kakedashiweb.site/archives/1869
JavaScriptを読み込む
JavaScriptも同様に「functions.php」で読み込みすることができます。
また、設定方法でhead内に読み込むのかbody下に読み込むのかも設定できます。
WordPressは、ｊQueryをデフォルトで読み込んだりしているので、その変更もfunctions.phpで変更することができます。
メインループ
現在執筆中です。
サブループ
現在執筆中です。
詳細ページ（single.php）
「次のページ」「前のページ」のリンクのみ取得手流方法。
記事詳細で次の記事、前の記事にタイトルをつける方法を紹介しています。
アイキャッチ画像
アイキャッチ画像を呼び出すことができます。
下記記事ではない場合の処理も紹介しています。
<?php the_post_thumbnail(); ?>
使用頻度の高いタグ
オリジナルテーマを作成で、よく使用するタグをまとめています。
オリジナルのテーマを作成する際にタグをド忘れした際にどうぞ。
・WordPressオリジナルテンプレート制作によく使うタグ一覧
よく使用する条件分岐のパターン一覧
現在執筆中です。
画像関係
画像の圧縮
WordPressの画像はアップロードして各サイズが生成されたときに圧縮され、劣化しています。
下記記事では、劣化を防ぐ方法・より圧縮する方法を紹介しています。
画像の圧縮率をfunctions.phpに記述し変更します。
add_filter('jpeg_quality', function( $arg ){ return 100; } );
