1. 1. 現在読んでいる: WordPressチュートリアル:HTMLからWordPressテーマを作成する方法(パート1)
  2. 2. WordPressチュートリアル:HTMLからWordPressテーマを作成する方法(パート2)
  3. 3. WordPressテーマの構造の紹介

HTML(+ CSS)Webサイトから始めた場合、WordPressに移行するときにすべてを捨てる必要はありません。 HTMLをWordPressに変換し、動的なWordPressプラットフォームで(より強力な)Webサイトを実行できます.


あるいは、そうではないかもしれません。おそらく、クライアントのHTMLデザインを本格的なWordPressテーマに変換する方法を考えているだけかもしれません。あるいは、より使い慣れたHTML側から基本的なWordPress(+ PHP)プログラミングを学びたいと思うかもしれません。.

今日ここにいる理由が何であれ、このWordPressチュートリアルでは、HTMLからWordPressテーマを作成するための基本を紹介します。このガイドに従ってテーマを最初から作成するか、Githubに移動して「空のキャンバス」を提供するWPExplorerスターターテーマをダウンロードし、必要なすべてのテンプレートファイルとコードを使用してテーマを作成します。コードを読んで学習する人の場合は、スターターテーマをダウンロードし、ガイドをスキップして、動作を確認してください。それ以外の場合は、コードエディターを入手してください(私は使用および推奨しています) メモ帳++, または SublimeText)とブラウザの準備ができたら、このシンプルなガイドに従って最後まで.

WordPressテーマの命名

まず、テーマに一意の名前を付ける必要があります。これは、Webサイトのみのテーマを作成する場合は不要です。いずれにしても、インストール時に簡単に識別できるようにテーマに名前を付ける必要があります.

この時点での一般的な仮定:

  • index.htmlとCSSスタイルシートの準備ができている.
  • 少なくとも1つのテーマを使用して、WordPressが正常にインストールされている。二十四
  • 新しいWordPressテーマを保存するテーマフォルダーはすでに作成されています��

WordPressテーマの命名に戻りましょう。コードエディターを開き、スタイルシートの内容を新しいファイルにコピーして貼り付け、次の名前で保存します。 style.css あなたのテーマフォルダに。の最上部に次の情報を追加します 新しく作成されたstyle.css

/ *
テーマ名:テーマの名前
テーマURI:テーマのURL
説明:テーマの簡単な説明
バージョン:1.0または必要なその他のバージョン
著者:あなたの名前またはWordPress.orgのユーザー名
著者URI:あなたのウェブアドレス
タグ:WordPressテーマリポジトリでテーマを見つけるためのタグ
* /

(/ *…* /)コメントタグを省略しないでください. 変更を保存します。この情報は、WordPressにテーマの名前、作者、そのような無料のものを伝えます。重要な部分はテーマの名前です。これにより、WPダッシュボードからテーマを選択してアクティブ化できます.

HTMLテンプレートをPHPファイルに分解する

このチュートリアルでは、HTMLテンプレートが左から右に配置されていることを前提としています(ヘッダー、コンテンツ、サイドバー、フッター)。別のデザインを使用している場合は、コードを少し操作する必要があるかもしれません。とても楽しく簡単です.

次のステップでは、4つのPHPファイルを作成します。コードエディターを使用して、index.php、header.php、sidebar.php、footer.phpを作成し、テーマフォルダーに保存します。この時点ではすべてのファイルが空なので、何もしないようにしてください。説明のために、私は次のindex.htmlおよびCSSスタイルシートファイルを使用しています。

INDEX.HTML




HTMLテンプレートをWordPressテーマに変換する方法-WPExplorer



これはヘッダーセクションです。ここにロゴとその他の詳細を入力します.

これはメインコンテンツエリアです.

そしてこれがフッターです.

CSSスタイルシート

#wrap {margin:0 auto;幅:95%; margin-top:-10px;高さ:100%;}
.ヘッダー{幅:99.8%; border:1px solid#999; height:135px;}
.content {width:70%; border:1px solid#999; margin-top:5px;}
.sidebar {float:right; margin-top:-54px; width:29%; border:1px solid#999;}
.フッター{width:99.8%; border:1px solid#999; margin-top:10px;}

何も操作しない場合は、両方のコードを取得できます。それらをコードエディターにコピーして貼り付け、保存し、先ほど述べた4つのPHPファイルを作成して、次のパートの準備をします。新しく作成した(そして空の)を開きます header.php. 既存のWordPressインストールにログインし、次の場所に移動します 外観– >>編集者 そして開く header.php. すべてのコードを タグを付けて、header.phpファイルに貼り付けます。以下は、Twenty Fourteenテーマのheader.phpファイルから取得したコードです。




<?php wp_title( '|', true, 'right' ); ?>




次に、あなたを開きます index.html ファイルを作成し、ヘッダーコード(つまり、

セクション)のすぐ下にあるheader.phpに 以下に示すタグ:





<?php wp_title( '|', true, 'right' ); ?>







これはヘッダーセクションです。ここにロゴとその他の詳細を入力します.

それから加えて…

…の間のどこでも header.phpファイルのタグで、スタイルシートをリンクします。置くことも忘れないでください そして 上記のようにheader.phpでタグを開く。すべての変更を保存.

2番目のセクション(つまり.

index.htmlから 新しく作成されたindex.php , そして追加…

…最上部と…


…絶対的に。これらの3行は、header.php、sidebar.php、footer.phpを(この順序で)フェッチし、index.phpに表示して、コードを元に戻します。すべての変更を保存します。この時点で、index.phpファイルは次のようになります。



次に、index.htmlのサイドバーセクションとフッターセクションから、それぞれsidebar.phpとfooter.phpにコンテンツをコピーします。.

投稿を追加する

HTMLテンプレートがWordPressテーマに変形しようとしています。投稿を追加するだけです。ブログに投稿がある場合、カスタムHTMLからWordPressへのテーマでどのように表示しますか?あなたはとして知られている特別なタイプのPHP関数を使用します ループ. ループは、投稿やコメントをどこにでも表示する特別なコードです.

今、あなたの投稿を コンテンツセクション index.phpテンプレートの次のコードをコピーして、

そして

以下に示すタグ:

それはあなたの投稿を世話します. ABCのように簡単. この時点で(このチュートリアルで提供されているサンプルファイルを使用して)、header.phpは次のようになります。




<?php wp_title( '|', true, 'right' ); ?>




sidebar.phpは次のようになります。

フッター.phpは次のようになります。

そしてこれがフッターです

閉店に気づきましたか そして フッターのタグ?それらも含めることを忘れないでください.

style.cssは次のようになります。

/ *
テーマ名:HTMLからWordPressテーマを作成する
テーマURI:http://wpexplorer.com
説明:このテーマは、HTMLからWordPressテーマを作成する方法を示します
バージョン:1.0
著者:@WPExplorerのフレディ
著者URI:http://WPExplorer.com/create-wordpress-theme-html-1/
タグ:wpexplorer、カスタムテーマ、HTMLからWordPress、WordPressテーマの作成
* /
体 {
font-family:arial、helvetica、verdana;
font-size:0.8em;
幅:100%;
高さ:100%;
}

.ヘッダー{
背景色:#1be;
左マージン:14%;
上:0;
ボーダー幅:0.1em;
border-color:#999;
ボーダースタイル:ソリッド。
幅:72%;
高さ:250px;
}

.コンテンツ{
background-color:#999;
左マージン:14%;
margin-top:5px;
float:左;
幅:46%;
ボーダー幅:0.1em;
border-color:#999;
ボーダースタイル:ソリッド。
}

.サイドバー{
背景色:#1d5;
マージン右:14%;
margin-top:5px;
float:右;
ボーダー幅:0.1em;
border-color:#999;
ボーダースタイル:ソリッド。
top:180px;
幅:23%;
}

.フッター{
背景色:赤;
左マージン:14%;
float:左;
margin-top:5px;
幅:72%;
高さ:50px;
ボーダー幅:0.1em;
border-color:#999;
ボーダースタイル:ソリッド。
}

そして、index.phpは次のようになります。





繰り返しますが、これは、ヘッダー、コンテンツ、サイドバー、フッターレイアウトを備えた左から右へのWebサイトに基づいています。フォローしていますか? 5つのファイルはすべて、テーマフォルダーに保存する必要があります。フォルダーには任意の名前を付け、WinRarまたは同等のプログラムを使用してZIPアーカイブに圧縮します。新しいテーマをWordPressインストールにアップロードし、アクティブにして、変換されたテーマの動作を確認します!

簡単でしたね?テーマのスタイルは自由に設定できますが、WordPressで気に入っている機能のほとんどはまだアクティブではありません。このチュートリアルでは、HTMLテンプレートをWordPressに変換する基本について説明しており、初心者には非常に役立つはずです。次のチュートリアルでは、物事を一段高くして、WordPressプログラミングの他の側面(たとえば、 テンプレートファイル そして テンプレートタグ)を使用すると、HTMLテンプレートを好きなように変換できます。. 乞うご期待!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me