WordPress PR

WordPressオリジナルテーマの作り方!0から作れるようになるまで

記事内に商品プロモーションを含む場合があります

WordPressの完全オリジナルテーマの作成方法をまとめています。
WordPressのオリジナルテーマを作成する方法を紹介していくので、参考にしてみてください。

WordPressオリジナルテーマの作り方

早速オリジナルテーマを作っていきましょう!

webサイトをデザインする

リッチなサイトは、世界中に存在します。
どんなサイトが流行っているのか、どんなデザインが用途にあっているのか考える必要があります。
まずは、サイトギャラリーサイトを見てデザインの参考にしてみてください。
オススメのガラリーサイトのリンクを載せておきます。

SANKOU!

muuuuu.org

 

デザインを作成するには、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は、jQueryをデフォルトで読み込んだりしているので、その変更もfunctions.phpで変更することができます。

WordPressのJavaScriptの読み込みを管理する方法WordPressのJavaScriptの読み込みを管理する方法を紹介。WordPressでJavaScriptを読み込む正しい方法を紹介します。functions.phpでJavaScriotの読み込みを管理しよう。...

 

 

メインループ

現在執筆中です。

 

 

サブループ

現在執筆中です。

 

 

詳細ページ(single.php)

「次のページ」「前のページ」のリンクのみ取得手流方法。
記事詳細で次の記事、前の記事にタイトルをつける方法を紹介しています。

WordPressオリジナルテンプレート制作によく使うタグ一覧WordPressのテーマ作成でよく使用するタグを紹介。オリジナルテーマの作成やテーマのカスタマイズ時の参考にしてみてください。...

 

 

アイキャッチ画像

アイキャッチ画像を呼び出すことができます。
下記記事ではない場合の処理も紹介しています。

<?php the_post_thumbnail(); ?>

WordPressのアイキャッチ画像を表示する方法

 

 

使用頻度の高いタグ

オリジナルテーマを作成で、よく使用するタグをまとめています。
オリジナルのテーマを作成する際にタグをド忘れした際にどうぞ。
WordPressオリジナルテンプレート制作によく使うタグ一覧

 

 

よく使用する条件分岐のパターン一覧

現在執筆中です。

 

 

画像関係

画像の圧縮

WordPressの画像はアップロードして各サイズが生成されたときに圧縮され、劣化しています。
下記記事では、劣化を防ぐ方法・より圧縮する方法を紹介しています。

画像の圧縮率をfunctions.phpに記述し変更します。

add_filter('jpeg_quality', function( $arg ){ return 100; } );
WordPressにアップした画像の画質が劣化してる?アップロード画像の画像圧縮率を変更する方法WordPressのアップロード画像の画質を上げる方法。WPはデフォルトで画像を圧縮してしまう。画質の劣化を感じたら設定を変更して高画質のまま画像をアップロードしよう。...
ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。