ローカルでWordpressのテーマを作成する

公開: 2022-02-23

多目的から焦点を絞ったニッチなオプションまで、何千ものWordPressテーマから選択できます。ただし、Webサイトを希望どおりに表示する唯一の方法は、独自のテーマを作成することである場合があります。

WordPressテーマの作成は、Web開発の豊富なバックグラウンドがなくても、完全に実行可能です。テーマに必要なファイルとそれらを配置する場所を学ぶ必要があります。次に、すべてが希望どおりに機能するようになるまで、コードに変更を加えます。

この記事では、WordPressのテーマ開発と開始に必要なツールを紹介します。また、基本的なWordPressテーマを4つのステップで作成する方法も紹介します。飛び込みましょう！

WordPressテーマ開発の紹介

WordPressテーマは、サイトの外観とレイアウトに影響を与えるテンプレートです。たとえば、デフォルトのTwentySeventeenテーマを使用した新しいWordPressWebサイトは次のとおりです。

サンドボックス環境での17のワードプレステーマのウェブサイトのスクリーンショット

これは同じWebサイトですが、今回は人気のあるStoutテーマを使用しています。

サンドボックス環境での頑丈なワードプレステーマのウェブサイトのスクリーンショット

適切なテーマを使用すると、コードを変更することなく、WordPressWebサイトを好きなように見せることができます。ただし、要件に一致するテーマがない場合は、独自のテーマを作成することもできます。このアプローチの利点は、サイトの外観とテーマの機能を完全に制御できることです。

独自のテーマを作成するには、少なくとも基本的なWeb開発のバックグラウンドが必要です。専門家である必要はありませんが、HTML、PHP、およびCSSの一般的な理解がない場合、プロセスはイライラする可能性があります。

Genesis FrameworkとStudioPressのテーマを無料で入手してください！

Flywheelでサイトをホストすると、楽しいダッシュボードから30を超えるプレミアムWordPressテーマ（Genesisを含む！）にアクセスできます。それはあなたがたった15ドル/月で始めることができる価値で2,000ドル以上です！詳細については、こちらをご覧ください。

同様に、テーマを作成し、物事を正しく表示して機能させるには時間がかかる場合があります。したがって、独自のテーマを作成するかどうかの決定は、サイトがカスタムテーマの恩恵を受けるかどうかにかかっています。また、既存のテーマを使用する場合と比較して、独自のテーマをタイムリーかつコスト効率よく作成する方法を検討する必要があります。

最後に、多くの人がWordPressテーマの開発でかなり良い生活を送っていることを考慮する価値があります。それは非常に競争の激しいビジネス分野ですが、勝者を育てて仕事から利益を得ることができなかったと誰が言いますか？

テーマ開発にローカルのWordPressセットアップが必要な理由

カスタムテーマを設定してテストするには、WordPressをインストールする必要があります。これを行う最良の方法は、次の理由から、ローカル環境を使用することです。

より効率的です。ローカルのWordPressセットアップでは、読み込み時間はほとんど存在せず、外部サーバーにファイルをアップロードする必要はありません。
ライブ環境を使用するよりも安全です。 Web開発には常に多くの試行錯誤が伴うため、安全なローカル環境で行うのは理にかなっています。
複数のテスト環境を作成できます。ローカルセットアップでは、複数のWordPressWebサイトを実行する方がはるかに簡単です。
専用のソフトウェアを使用できます。 Mac、Windows、Linuxマシン用の無料アプリであるLocalなど、ローカルのWordPress開発をスピードアップするために使用できるアプリケーションはたくさんあります。

Localを使用すると、数回クリックするだけで、必要な数のWordPressWebサイトをセットアップできます。また、すべてのテストサイトを管理できるシンプルなダッシュボードにアクセスできます。

さらに重要なのは、各ローカルWebサイトを構成できることです。つまり、さまざまなバージョンのPHP、MySQL、およびnginxまたはApacheのいずれかを使用できます。一部のサイトを「ブループリント」として保存して、後で再利用することもできます。

最後に、Flywheelを使用している場合は、ソフトウェアに「プッシュ」オプションが含まれていることを知って喜ぶでしょう。つまり、ローカルWebサイトをFlywheelに直接プッシュして、それらをライブにすることができます。たとえば、Localを使用して新しいWordPressテーマを作成し、それをWebサイトのステージングコピーでテストし、意図したとおりに機能していることがわかったら、ライブサイトにプッシュすることができます。

ローカルでWordPressテーマを作成する方法（4ステップ）

このチュートリアルでは、テーマ開発用にローカルのWordPress環境をセットアップする方法、必要なすべてのファイルについて説明し、それをテストする方法を示します。仕事に取り掛かりましょう！

1.ローカルを使用してWordPressWebサイトをセットアップします

あなたがする必要がある最初のことは無料でローカルをダウンロードすることです。これが完了したら、アプリケーションをインストールします。 Localは仮想マシンソフトウェアをセットアップして動作させる必要があるため、これには数分かかる場合があることに注意してください。ローカルの準備が整うと、新しいサイトを作成するためのプロンプトが表示されます。

それをクリックすると、サイトの名前を選択するように求められます。

[ Advanced Options ]というラベルの付いたタブもあることに気付くかもしれません。それをクリックすると、ローカルサイトのドメインを編集し、ルートディレクトリを選択して、ブループリントを使用するかどうかを選択できます。

今のところ、サイトのドメインとディレクトリを自由に編集してください。ブループリントの使用方法については後で説明します。準備ができたら、右下隅にある[ Continue ]ボタンをクリックします。

次のページでは、WebサイトにLocalのデフォルトのWordPress環境を使用するオプションが表示されます。 Preferredオプションには、最新バージョンのPHPとMySQLが含まれ、サーバーにnginx+Varnishの組み合わせを使用します。

フライホイールサーバーセットアップ優先オプションセットアッププロンプトによるローカルのスクリーンショット

[ Custom ]オプションを選択することもできます。これにより、前述のすべての設定を変更できます。

フライホイールサーバーセットアップカスタム環境プロンプトによるローカルのスクリーンショット

一般的に言って、PHPとMySQLの最新バージョンを使用することは常に良い呼びかけです。ただし、ローカルを使用してステージングサイトを設定している場合は、ライブサーバーをエミュレートするために上記のソフトウェアの古いバージョンを使用する必要がある場合があります。

また、カスタム環境を選択した場合、ローカルの[ Connect to Flywheel ]オプションを使用できないことに注意してください。つまり、サイトを手動で移行することはできますが、サイトをライブでプッシュすることはできません。

このチュートリアルでは、 Preferred設定に固執するので、それを選択して[ Continue ]をクリックします。これで、管理者のユーザー名、パスワード、および電子メールを選択し、マルチサイトを有効にするかどうかを選択できるようになります。

フライホイールによるローカルのスクリーンショットサインアップ新しいサイトマルチサイトプロンプト

ローカルで設定されているデフォルトの電子メールを使用すると、アプリケーション内からメッセージをチェックアウトできるようになるため、これを使用することをお勧めします。もう一度[ Continueをクリックし、ローカルがサイトに必要なすべての依存関係をダウンロードして構成するのを待ちます。それが完了すると、サイトの情報が右側に表示され、ステップ2に進むことができます。

2.新しいテーマディレクトリを設定します

ローカルのWordPressWebサイトの準備ができたので、構成したURLを使用して通常のサイトと同じようにアクセスできます。右上隅のAdmin設定をクリックして、ダッシュボードに直接ジャンプすることもできます。

ただし、今のところ、すべてのWordPressファイルが存在するローカルサイトのルートフォルダーにアクセスする必要があります。それを見つけるには、ローカル画面の上部にあるサイトのタイトルのすぐ下を見てください。そこにディレクトリがリストされているはずです。その右側にクリックできる矢印があります。

その矢印をクリックすると、ファイルエクスプローラーでディレクトリが開きます。内部に移動し、app / publicフォルダーを開いて、WordPressファイルを見つけます。

FTPクライアントを使用してWordPressサイトにアクセスしたことがある場合、これは非常によく知られているはずです。 wp-content/themesディレクトリに移動します。ここに、3つのフォルダが表示されます。これらは、WordPressが新しいサイトにインストールするデフォルトのテーマです。

先に進み、新しいフォルダを作成します。テーマに使用する名前を付けます。

フォルダは自然に空です。次は、コンテンツを追加します。

3.テーマレイアウトファイルを作成します

基本的なWordPressテーマは、 index.phpとstyle.cssの2つのファイルのみで機能します。 index.phpファイルはWordPressのメインページに対応しており、最新のブログ投稿がすべて表示され、 style.cssからそのスタイルが取得されます。さあ、両方のファイルを作成しましょう。

コンピューターローカルファイルのスクリーンショットテストテーマインデックスフォルダー

現時点では両方のファイルにコードが含まれていないので、変更してみましょう。まず、 style.cssを開き、テーマの簡単な説明を追加します。

/* Theme Name: Test Theme Author: John Doe Description: A basic WordPress theme Version: 0.0.1 Tags: bootstrap */

index.phpで同じプロセスを繰り返しますが、このコードはもう少し複雑です。

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1><?php bloginfo('title'); ?></h1>
<h3><?php bloginfo('description'); ?></h3>
<?php while (have_posts()) {
the_post();
?>
<h5><?php the_date(); ?></h5>
<h2>
<a href="index.php?p=<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p><?php the_content(); ?></p>
<hr/>
<?php } ?>
</body>
</html>

それはあなたが得ることができるのと同じくらい基本的なレイアウトです。そのコード内で、前に設定したstyle.cssファイルを呼び出し、ブログのタイトルを表示し、WordPressの「ループ」を使用しています。わからない場合は、ループはテーマが投稿を表示するために使用するコードの名前であり、実際の構造はテーマごとに大きく異なる可能性があります。

今すぐ両方のファイルへの変更を保存し、WordPressダッシュボードに移動します。 [ Appearance > Themes ]タブに移動し、新しいテーマが内部で待機していることに注目してください。

すぐにアクティブにして、ホームページをチェックしてください。

ホームページに関しては、賞を獲得することはできません。ただし、重要なことは、残りのテーマを構築できる基盤が整っていることです。次のステップは、style.cssファイルを使用してテーマにフレアを追加することです。

物事を少しきれいにしたら、もっと複雑なレイアウトで作業したくなるでしょう。たとえば、header.phpファイルだけでなく、テーマにサイドバーとフッターを追加したい場合があります。

テーマの形がわからない場合は、WordPressのスターターテーマをよく確認することをお勧めします。視覚的な観点からは非常にシンプルですが、最新のWebサイトに必要なすべての機能が含まれています。

4.WordPressテーマをテストします

ライブサイトでテーマを使用する前に、テーマを徹底的にテストする必要があります。簡単な視覚的概要でほとんどのバグが明らかになりますが、通常はそれだけでは不十分です。テーマをレビューしてWordPressのレビュー基準を満たしていることを確認するテーマチェックなどのプラグインを使用することもできます。

テーマレビューの基準は、WordPress.orgでテーマを公開する場合にのみ重要です。ただし、それらは依然としてテーマを測定するための優れた基準です。

テーマを公開する準備ができたら、2つのオプションがあります。テーマフォルダをパッケージ化してFTP経由でサイトにアップロードするか、[Flywheelに接続]オプションを使用してサイト全体をFlywheelに直接公開できます。

まとめる前に、新しいテーマ用に作成したテストセットアップのブループリントを作成することもお勧めします。そうすれば、必要に応じて複製することができます。

結論

Web開発の基本を理解していれば、独自のWordPressテーマを作成することを妨げるものは何もありません。時間がかかる場合もありますが、努力する価値は十分にあります。さらに、通常のテーマを使用するよりも、サイトの外観を大幅に制御できます。

ローカルを使用してWordPressテーマを作成するための4つの基本的な手順を要約してみましょう。

ローカルを使用してWordPressWebサイトを設定します。
新しいテーマディレクトリを設定します。
テーマレイアウトファイルを作成します。
WordPressテーマをテストします。

WordPressのテーマ開発全般について質問がありますか？以下のコメントセクションでそれらについて話しましょう！

無料の電子ブック：完璧なWordPress開発ワークフロー

WordPressサイトの開発は難しいことではありません。実際、適切なツールといくつかのシンプルなソフトウェアを使用すれば、開発ワークフローは実に楽しいものになります。ローカルでの開発からサイトの公開まで、プロセスを簡素化し、今後数年間サイトを維持するための最善のヒントとコツをまとめました。ワークフローを合理化し、開発をスピードアップする準備はできていますか？こちらからダウンロードしてください！

この記事はもともと2018年9月4日に公開されました。 最終更新日は2-22-2022です。