Wordpressのテーマ開発チュートリアルステップバイステップ–Vegibit

これは、私たちが最初からあなた自身のWordPressのテーマを作成する方法を調べる楽しいチュートリアルになるだろう。実際には、我々は絶対にゼロのファイルとゼロのコード行から始めましょう。 WordPressのテーマがどのように機能するかを理解する唯一の方法は、本当に低レベルでジャンプし、すべてのことを自分で行うことです。はい、WordPressがそれを強化するコードを理解することなく、あなたのためにすべてを行うことができるので、これを避けるのは魅力的です。, これはPHP、JavaScript、CSS、または基本的なHTMLです。ステップWordPressのテーマチュートリアルによって、このステップの終わりまでに、あなたはすべてが一緒に収まる方法と簡単にあなたの意志にWordPressを曲げる

あなたがWordPressのウェブサイトを実行しているときにあなたに利用可能な非常に多くの無料のテーマがあります。外の無料のきせかえテーマが選択保険料を支払うための専門的にしたWordPressテーマのうち、幻想的な特徴です。では、なぜ最初から独自のテーマを作成する方法を学びますか？, 答えは、あなたが使用しているテーマに関係なく、あなたのウェブサイトに簡単な変更を加えたい時が来るだろうということです。これらの変更の一部は、単純なプラグインやウィジェットで対応できる場合があります。しかし、何度も、それはあなたが変更したいものを理解するために、それを変更する方法、そして扱いにくくなるプラグインやアドオンの混乱にあなた基礎レベルの知識のほんの少しで、あなたはあなたのテーマを変更したり、単にゼロから自分のものを構築することに自信があります。, 編集するファイルと、目的の結果を作成するために追加または変更するコードを知ることができます。

ステップ1：テーマファイルを保持するフォルダを作成します。

テーマをビルドする場合は、WordPressテーマを構成するファイルがWordPressインストール内のどこにあるかを知る必要があります。これはかなり簡単です。 WordPressのインストールには、通常、wordpressという名前のルートディレクトリがあることがわかっています。 PHP Stormのルートディレクトリは次のようになります。,

このディレクトリには、次のファイルとフォルダが含まれています。

Files

Folders

wp-admin
wp-content
wp-includes

私たちが今最も興味を持っているフォルダはwp-contentフォルダです。 Wp-contentフォルダ内にthemesという名前のフォルダがあります。このフォルダが何であるか知っていますか？うん、その通りです！それはあなたがあなたのWordPressのウェブサイトで使用したい一つ以上のテーマを保持しているフォルダです。, このテーマフォルダでは、twentyfifteen、twentysixteen、およびtwentyseventeenの三つの追加のフォルダを見つけます。これらのフォルダに使用しているテーマWordPressの船舶によるデフォルトです。その下にはcustomthemeという名前のフォルダもあります。見ていて気分が良いものを作成するフォルダとしても、装置としてのインスタレーションここまですることなく当社のWordPressのテーマをゼロから立ち上げました。

ステップ2：スタイルを作成します。cssとインデックス。カスタムテーマフォルダ内のphp

WordPressテーマファイルがファイルシステム内のどこにあるかがわかりました。, また、テーマフォルダにcustomthemeという名前の新しいフォルダを作成しました。ここで、このディレクトリに二つの空のファイルを作成します。一つはindexと呼ばれます。phpと他のものはスタイルと呼ばれます。cssです。

これらのファイルに、WordPressで新しいテーマを作成するために必要な最小限のものを入力しましょう。

スタイル。css

WordPressは実際にスタイルに配置したコメントを読み取ります。cssファイル。ここでは、ビルドするテーマに関する特定の情報を指定します。

スタイル。,cssは、すべてのWordPressテーマに必要なスタイルシート（CSS）ファイルです。それはウェブサイトのページの提示（視覚設計およびレイアウト）を制御する。

ここでのスニペットでは、テーマ名、作成者、作成者URI、およびテーマのバージョン番号を割り当てるだけです。,

テーマ名：customtheme

著者：vegibit

著者uri：https://vegibit.com

バージョン：1.0

インデックス。,php

このファイルでは、カスタムテーマが機能していることを証明するために画面に何かを出力したいだけです。

1	<h1>カスタムテーマ！</h1>

素晴らしい仕事！信じられないかもしれませんが、最初のWordPressテーマを作成しました。,

ステップ3：WordPressのダッシュボードからあなたのテーマを有効にします

この時点で、私たちは私たちのWordPressのダッシュボードにアクセスし、外観に移動することができます->テーマとloと見よ、我々は我々が作成した新しいテーマを参照してください。

“テーマの詳細”をクリックしてカスタムテーマをドリルダウンし、スタイルに入力した情報を見つけることができます。cssファイルが動作しました。著者Vegibitによって、バージョン1.0のcustomthemeという名前と、提供したURIへのリンクがあることがわかります。非常にクール。,

そして今、真実の瞬間！先に行くと、新しいcustomthemeの”アクティブ化”をクリックして、サイトを訪問します。それは任意のウェビー賞を獲得するつもりはありませんが、我々は私たちの自己新しいカスタムテーマに良いスタートを持っています！

ステップ4：投稿タイトルと投稿テキストを出力するコードを追加します

このチュートリアルでは、データベースにいくつかの今、私たちのテーマは、単にカスタムテーマを出力！, このページには、データベースにいくつの投稿があっても、サイトを訪問したときのページ次に、データベースからいくつかのデータを取得し、それをページに出力することに移りましょう。具体的には、すべての投稿の投稿タイトルと投稿コンテンツを取得し、ホームページで表示したいと考えています。それでは、今のショットを与えましょう。まず、WordPressのダッシュボードでの投稿について見てみましょう。

WordPressのループを活用

今、私たちはWordPressのループについて少し話すことができます。 WordPressのループは、実際にはWordPressを実行させるエンジンです。, テーマ開発者が投稿をチェックし、必要に応じてページに表示するのは、このループを介して行われます。次の形式に従う場合は次のようにします。データベースに投稿がある場合は、まだ投稿がある間にそれらをループしましょう。 PHPコードでは次のようになります。,

<?php

if(have_posts()):

while(have_posts()):the_post();?>

<?,php endwhile;

else:

echo'<p>投稿はありません！</p>’;

endif;

ループは、最も基本的な形式で二つの関数を使用していることに注意してください。それらはhave_posts()とthe_post()です。 Have_posts()関数は一つだけのことを行います。ループオーバーするデータベース内の任意の投稿があるかどうかを示します。, この関数は、trueまたはfalseのいずれかを返します。それが返す場合true、ループオーバーするために利用可能な投稿があります。それが返す場合false、ループする投稿はありません。もう一つの関数the_post()は何も返しません。それの仕事は、WordPressが投稿を出力する準備をすることです。具体的には、次の投稿を取得し、投稿を設定し、in_the_loopプロパティをtrueに設定します。, ここで使用しているページが出力されない為に関する情報をブログで、もしアップデートできることを当社の指数です。phpファイル。

Okクール。これで、追加のWordPress関数the_title()とthe_content()を使用しました。ほとんどの場合、これらの関数はループ内で使用され、ループがデータベース内の各投稿を反復処理するときに各投稿のタイトルとコンテンツを取得するこしたがって、ループが実行されると、最初の投稿に出くわします。, その時、the_title()関数は投稿のタイトルをページに出力し、the_content()はその投稿の本文をページに出力します。次のループで、これらの関数は再び次のタイトルとコンテンツを取得し、それらをページに出力します。そこで、また見についての情報稿てなくなるの画面になります。やってみましょう！私たちは訪問しますhttp://wordpresstutorial.devそれが動作することを確認してください！,

ステップ5：各投稿へのリンクを追加します

ホームページの一部としてではなく、個々の投稿にリンクすることはどうですか。 WordPressが提供する特別な機能を使用して、非常に簡単にこれを行うことができます。このタスクでは、the_permalink()関数を使用できます。次のようにコードを更新できます。

これで、個々の投稿タイトルをクリックして、その投稿が一つだけあるページに移動できます。非常にクール！,

ステップ6：カスタムテーマにヘッダーとフッターを追加

タイトルとポストコンテンツは、良いテーマを作成するための中心です。ほとんどとして重要なのはヘッダ、フッター部のテーマです。これらのセクションによるコンテンツは常に可視すべてのページブ-サービスを提供しています。これらのセクショこれを行うには、あなたはそれを推測し、我々はヘッダーを取得し、フッターを取得するためにWordPressによって提供される特別な機能を利用します。あなたはまだ開発し始めてパターンを見ていますか？, WordPressのテーマ開発者としてできることはほとんど何でも、これらのカスタム関数を使用してすでに行われています。そのディレクティブの支払を覚えられ機能のWordPressテーマに開発。先に進んで、get_header()とget_footer()関数をテーマファイルに追加しましょう。

さて、あなたはそれを見ますか？! カスタムテーマには、ヘッダー領域とフッター領域があることがわかります。, ヘッダーにはサイトの名前とキャッチフレーズがありますが、フッターにはおなじみのテキストが表示されます。これらはデフォルトのヘッダ、フッターなどのオプション利用の場合はこれらの機能をカスタムヘッダーとフッターを作成したいときはどうでしょうか？すぐに来る！

2つのテーマファイルから4つまで

このチュートリアルでは、customthemeフォルダ（それ自体がthemesフォルダにあります）にある二つのファイルがあります。これらのファイルはstyleです。cssとインデックス。php。この時点で、さらに進むためにさらにファイルを追加する必要があります。, 先に行くとcustomthemeフォルダに二つの新しいファイルを作成します。これらのファイphpとフッター。php。

これらのファイルが行うことは、get_header()またはget_footer()関数を呼び出すときに、デフォルトで提供されるデフォルトのヘッダーとフッター実際、ウェブサイトを更新すると、ヘッダーとフッターがなくなったように見えます。そして追加されません任意のマークアップにこれらのファイルはまだない。ちょうど笑いのために、これをテストするようにファイルを設定します。

ヘッダー。,php

1 2	<h2>The Header!</h2> <hr>

footer.,php

1 2	<hr> <h2>The Footer!</h2>

Working with header.,php

上記の例はうまくいきましたが、このファイルが最も基本的なレベルでどのように機能するかを示しています。ヘッダー。しかし、phpファイルは実際には非常に重要なので、あまりにも早くそれの詳細を光沢しないようにしましょう！ここには、サイト上のすべてのページが何らかの方法でアクセスする必要があるコードが含まれています。まず、すべてのHTMLページにdoctypeがあります。このファイルでそれを指定します。さらに、すべてのページには、開始htmlタグ、先頭セクション、および開始本文タグがあります。これはすべてヘッダーに入ることができます。phpファイル。, すぐにすべてのwebページが利用するこれらの事のいくつかを加えよう。ここでもいくつかの新しいWordPress機能を利用します。これらはlanguage_attributes()、bloginfo()、body_class()になります。

ヘッダー。php

ページを再読み込みしてからブラウザでページのソースを表示すると、これらの関数が何をしているのかを知ることができます。私たちは、以下のこれらの関数から来た出力を持っている行を強調表示します：

再び、我々はWordPressで独自のテーマを開発するときにWordPressの関数の非常にリベラルな使い方を見ることができます。, 実際、私たちはまだカスタムコードをまったく書いていません。私たちは、さまざまなWordPressの機能が私たちに提供できることを学び、それらをカスタムテーマで動作させるだけです。

Wp_head()を含む

wp_head()は、WordPressテーマを扱っているときの特別な関数のようなものです。それは私たちがこれまでに見てきた他のすべてほど単純ではありません。この関数の目的は、ヘッダーの<head>セクションで出力を確定することです。phpファイル。, 実際には、</head>タグを閉じる直前に移動することを意図しています。ことが重要となり起動する場合は、さまざまなプラグインするものとします。フロントエンドのヘッドタグにスクリプトまたはデータを印刷します。他の多くのプラグインは、スタイル、スクリプト、またはメタ要素をサイトの<head>領域に追加するためにこのフックに頼っているかもしれないので、常にwp_head()をテーマに含めることをお勧めします。ここにそのように追加します：

ヘッダー。php

フッターを完了します。,php

ヘッダーに必要なものの基本を追加し終えました。phpファイル。今先に行くとフッターを丸めてみましょう。phpファイル。私たちがする必要があるいくつかのことがあります。リコールにヘッダを表します。phpファイルを開くhtmlとbodyタグがあります。それらはある時点で閉じる必要があります。フッター。phpファイルはそれを行うのに最適な場所です。したがって、wp_footer()関数の呼び出しに加えて、</html>および</body>タグを閉じ
フッター。,php

</footer>

<?php wp_footer() ?,>

</html>

wordpressダッシュボードでのサイト情報の変更

なぜこれらすべての派手な機能を使用してテーマを構築しなければならなかったのか疑問に思うかもしれません。たとえば、サイトの名前とキャッチフレーズをリストアップしたい場合は、名前と説明のパラメータを渡すbloginfo()関数を使用しました。, この理由は、一般的に、これらの値をサイトにハードコードすることは決してしたくないためです。これは変更される可能性のある情報です。さらに、あなたの主題を公衆に利用できるようにすれば、それらに彼らのウェブサイトのための自身の名前そしてtaglineがある。 WordPressの管理ダッシュボードにアクセスし、一般設定を更新して、このデータが自動的に入力されるのを確認できるはずです。

サイトタイトルをホームページにリンクする

ほとんどのテーマは、ウェブサイトのタイトルテキストをクリックし、サイトのホームページにユーザーを, このようにして、ユーザーがサイト上のどこにいても、そのタイトルテキストをクリックしてウェブサイトのメインページに戻ることができます。今すぐヘッダーにそのリンクを追加しましょう。php。

ステップ7：関数を追加します。phpファイルをプレゼンテーション

ここで、私たちが持つファイル当社ではカスタムテーマです。それらは索引です。php、スタイル。css、ヘッダー。php、およびフッター。php。おそらく、次に必要な最も重要なファイルは関数です。phpファイル。

関数。WordPressのphpファイこれは、WordPressのデフォルトの動作を変更するためのコードを配置するファイルです。, あなたはほぼ機能を考えることができます。覚えておくべきいくつかの重要なポイントとWordPressのためのプラグインの形としてphp：

一意のヘッダーテキストを必要としません
あなたのテーマファイルを保持しているフォルダに格納されている
現在活性化されたテーマのディレクトリ内の場合にのみ実行されます
現在のテーマにのみ適用されます
PHP関数、WordPress関数、またはカスタム関数を呼び出すことができます

私たちは私たちのテーマでひどく必要なことの一つは、いくつかのより良いスタイリングです！関数で関数を作成してみましょう。スタイルを含めるphpファイル。私たちのテーマにcssファイル。, ここに私達がその目的をいかに達成してもいいかある

このコードには、カスタムテーマのスタイルシートが含まれているか、アクティブになります。ヘッダー内のスタイルシートに簡単に手動でリンクできるように見えるときに、なぜカスタム関数を使用しているのか疑問に思うかもしれません。phpファイル。よく、これはあなたの努力のより大きいリターンのための前部の上のもう少し仕事を後ですることに来る。テーマがより複雑になり、より多くの資産が追加されるにつれて、あなたはあなたのためにすべての重い持ち上げを処理することができ、この一つの,

今では物事がもう少しきれいに見えるようにする時間です。まず、ラッピングを追加してみましょう<div>コンテナのクラスを持つ。オープニング<div>ヘッダーになります。phpでは、<div>がフッターに表示されます。php。また、post出力をindexにラップします。ポストのクラスを持つ<article>タグを持つphp。これに授業を対象にします。,我々は他のものの間でページ幅を設定できるようにcssファイル。また、スタイルにいくつかのより良いスタイリングこのステップのcss。

ステップ8：あなたのテーマにいくつかのスタイルを追加します

ヘッダー。php
オープニングを追加<div>ヘッダーに。phpファイル。

フッター。php
終了</div>をフッターに追加します。phpファイル。

インデックス。php
post出力を<article>タグ

スタイルでラップします。,css
最後に、我々はテーマが少しより良く見えるようにいくつかの様々なCSSスタイルの改善を追加します。

私たちは今、ブラウザで私たちのテストウェブサイトを訪問すると、我々はこのチュートリアルでステップバイステップで開発したWordPressのテーマはかなり良

WordPressのテーマ開発チュートリアルステップバイステップの概要

のは、我々は初心者のためのステップワードプレスのテーマチュートリアルによって、この基本的なステップで学んだすべてのものを確認してみましょう。, 私たちが学んだこと”を当社初のカスタムテーマにWordPressを自社のフォルダー側のテーマのフォルダのWordPressの設置できます。このフォルダーに追加しまし異なるファイルに対応して、それぞれのセクションのサイトに追加されます。当社のチュートリアルを開始し、満足に行けない仕事十分において、WordPressのテーマです。将来的には、私たちがカバーしたものよりも多くのファイルをこのフォルダに追加します。このチュートリア

スタイル。,cssこのファイルは、WordPressがカスタムテーマに関する情報を知るために、cssコメントを追加する場所です。また、テーマに適用するカスタムcssスタイリングも保持します。
インデックス。phpこのファイルは、テーマのhtmlと一般的な出力を制御します。ホームページのデータを出力するために使用されるメインファイルです。
ヘッダー。,phpでは、<head>エリアにあなたのウェブサイトに関する重要な情報を保持する領域を指定することができます。<html>、<body>、および、<divクラス=”コンテナ”>タグ。
フッター。phpフッターは、wp_footer()関数を呼び出す場所を与えることに加えて、ヘッダー領域で指定した開始タグを閉じます。
関数。,phpでは、PHPと組み込みのWordPressの両方の関数を呼び出し、WordPressのデフォルトの動作を変更するために独自の関数を定義することができます。

どもたちを支援しましたが、十分に機能するカスタムWordPressテーマのみ5つのファイルです。このことは、当財団レベルの知識をより高度なWordPressのテーマ機能素晴らしい仕事！

Good Mood

WordPressのテーマ開発チュートリアルステップバイステップ