自分のオリジナルhtmlサイトをphpファイルにしよう

変更できるテーマは、wordpressを設置したフォルダ / wp-content / themesの中に作成する必要があります(クイックインストールしている場合は作成、もしくはダウンロードします) 外観 → テーマ → テーマのインストールからGETしたデザインもすべてこの中に保存されています リモートサイトを見て確認してみましょう wordpressを設置したフォルダ / wp-content / themes

wordpressはどのようなphpファイルでhtmlページが構成されているのか?

41 元となるhtmlファイルを下記に分割します。

  • header.php(head部分)
  • sidebar.php(sidebar部分)
  • footer.php(footer部分)

さらに用途に応じて下記が必要です。※その他もあり

  • index.php(投稿ページなど下記がない場合はこれが適応されます)
  • single.php(投稿ページひとつひとつ)
  • page.php(固定ページ)
  • category.php(カテゴリーページ)

その他下記ファイルが必要です

  • style.css(自分で作成したスタイルシートです)
  • functions.php(何か機能を追加するときはこのファイルに追加します)
  • screenshot.png(テーマページに表示されるサムネイル)
  • comments.php(コメント機能をつける)

準備しよう

ローカルにwordpressを設置したフォルダ / wp-content / themesの中にテーマ(任意の名前)フォルダを作成。これをテーマフォルダと呼ぶ

元となるhtmlファイル(テンプレートの場合は切り離す)を開いておく。使用している画像はすべてアップロードし、絶対パスにしておく

テーマフォルダ内に下記をコピー

  • 付属するスタイルシート(名前はstyle.css)、
  • 付属するイメージフォルダ(名前はimages)※イメージはcssで背景指定しているものだけでよい

header.phpを作成

作成したテーマフォルダの中で右クリック

新規ファイル

名前を header.php とする

元となるhtmlファイルのheaderにしたい部分のコードビューをコピーしheader.phpに貼り付ける

header.php内のタイトル部分を下記に書き換える※タイトルをwordpressで設定したタイトルに書き換えるため

→ header.php内のスタイルシートの部分を下記に書き換える

→ < / head>の直前に下記を貼り付ける

→ body内のメニューの部分を下記に書き換える※divの中だけ書き換える。リストタグで出来ている事。メニューを自動で増やさなくていい時は必要ない

sidebar.phpを作成

作成したテーマフォルダの中で右クリック

新規ファイル

名前を sidebar.php とする

元となるhtmlファイルのsidebarにしたい部分のコードビューをコピーしsidebar.phpに貼り付ける

ウィジェットにしたい部分に下記を貼り付ける

footer.phpを作成

作成したテーマフォルダの中で右クリック

新規ファイル

名前を footer.php とする

元となるhtmlファイルのfooterにしたい部分のコードビューをコピーしfooter.phpに貼り付ける

< / body>の直前に下記を貼り付ける

index.phpを作成

作成したテーマフォルダの中で右クリック ↓ 新規ファイル ↓ 名前を index.php とする ↓ 下記を index.phpに貼り付ける※div名を注意

 functions.phpを作成

作成したテーマフォルダの中で右クリック

新規ファイル

名前を functions.phpとする

下記を functions.phpに貼り付ける

スクリーンショットを作成

テーマフォルダ内にscreenshot.pngとして保存 ↓ テーマフォルダをアップロードwordpressを設置したフォルダ / wp-content / themes

ダッシュボード → 外観 → テーマ → テーマの変更 → 作成したテーマを有効化 → 公開をクリック

実際にアクセスしてみましょう 自分のサイトドメイン / フォルダ指定したのならばフォルダ名/ ※うまく出来ない場合は

  • 1.パスに注意
  • 2.div名を注意
  • 3.日本語が文字化けしてたら文字コードをUTF-8にする dreamweaverメニューバー → 修正 → ページプロパティ → タイトル/エンコーディング → エンコーディング
見ていただいてありがとうございます。↓ポチしてくださいませ。
  • 見た (0)
  • もう少し詳しく書いて! (0)
  • 見たけど役立たず (0)