PAGE TOP

公開日:

【超初心者向け】WordPress自作テーマを作ろう!

プログラミング

Tags
php
wordpress

こんにちは!

SF映画はあまり見ないけれど宇宙には行ってみたい。どうも、S.Fです。

今回はhtmlやcssで静的構築はできるけれど、
WordPressのテーマ作成はしたことがない…

とりあえず、WordPressの構造をさらっと理解してページを作ってみたい!

という方向けの記事です。

 

WordPressのテーマ作成はPHPの知識が必要なのですが、
今回は、PHPはよく分からない…という方でも大丈夫です!

超!超初心者さん向けに!!

PHPはほぼコピペ。とりあえず静的サイトからWordPressサイトに変身させよう!

ということで、TOPの1ページだけ作る手順をご紹介します。

なので今回は、投稿記事ページや記事の一覧ページなどなどは作りません。

今後、後編で投稿ページやアーカイブページの作成方法も書いていきたいと思っています←

 

専門用語ばかりのサイトは苦手だ!
超!初心者向けの説明をしてほしい!

そんなあなたに必見。
前置きはこの辺にして早速始めましょう。

 

※今回は、予め静的構築したサイトをWordPressのテーマ化していく、という想定でお話ししていきます。

※PHPは予めインストールしておいてください(‘ω’)ノ

 

 

ちなみにPHPとはどんなものか?WordPressで記述するPHPについて、詳しく読みたい方はこちらの記事も是非ご覧ください。

 

サーバーを用意する

WordPressでサイトを持ちたい時、レンタルサーバー契約の必要があります。
おすすめを載せておきます!

【無料】
スターサーバーフリー

【有料】
XSERVER(エックスサーバー)
LOLIPOP!(ロリポップ!)

それぞれ、「WordPress簡単インストール機能」が搭載されているので
サーバー契約が完了したら、WordPressをインストールしましょう。

 

WordPressの仕組みを理解しよう

WordPressでメインの1ページだけ構築する場合、最低限!必要なファイルはこちら

  • index.php
  • style.css
  • functions.php
  • header.php
  • footer.php
  • 画像やJSファイル

必須マークがついているものは必ずアップしないとテーマとして認識されません。
※これらのPHPファイル以外にもWordPressで使用するPHPファイルはまだまだあります。
 

では、それぞれのファイルを詳しく解説していきます。

ページは、ヘッダー・フッター・メインコンテンツなど各パーツごとにPHPを用意する必要があります。

それがこの3つ。

  • header.php → ヘッダー
  • footer.php   → フッター
  • index.php    → メインコンテンツ

イメージとしてはこんな感じです。


※ブログの場合は横に「sidebar.php」が入ってきます。

 

そしてこれらの他に必須で用意するファイルがあと二つ。

  • style.css → テーマのスタイル
  • functions.php → テーマに関する関数などを記述する

 

これだけでとりあえず、今回の1ページはできます。

ただ!前述していたようにこの他にもPHPファイルはまだたくさんあり…

そしてWordPressとはお知らせなどを投稿するためにあるようなものです。

お知らせ記事、記事の一覧ページなどに必要なPHPファイルは
いずれ公開する後編でご紹介する予定です!
 

必要なファイルのご紹介が済んだところで、
実際にどんなコードを書いていけばよいのか!

詳しくは次の章からスタートです!

phpファイルを準備する

まず、ヘッダー・フッター・メイン部分に該当する、

  • header.php
  • footer.php
  • index.php

これらのPHPファイルを準備していきます!

htmlをphpに書き換えよう

まず、静的構築で作成したhtmlファイルを丸々複製してください。

複製したら、そのファイル名の語尾「〜.html」を「〜.php」に変えてあげます。

続いて中身を書き換えていきます。

パスを書き換える(リンク、画像ファイルなど)

htmlファイル内の「href」「src」の中身を一部PHPに書き換えていきます。(ほぼコピペ)

①リンクパス

・相対パスの場合

<a href="../news/index.html">お知らせ</a>  //「../」の部分を書き換える

・絶対パスの場合

<a href="https://mmm.co.jp/news/">インフォ</a>
//「https://mmm.co.jp」の部分を書き換える

↓このように書き換えます。

<a href="<?php echo esc_url( get_home_url() ); ?>/news/">お知らせ</a>


 
【解説】

<?php echo esc_url( get_home_url() ); ?>

これがTOPページのURLへと置換されます。

※このサイトでいうと「https://mmm.co.jp」の部分

 

②画像パス

・画像ファイル(サーバーにアップする想定)

<img src="../images/top/img_01.jpg" alt="">  //「../」の部分を書き換える

↓このように

<img src="<?php get_template_directory_uri() ?>/images/top/img_01.jpg" alt=""/>


 
【解説】

<?php get_template_directory_uri() ?>

これがサーバーにアップしたテーマのディレクトリ階層まで取得してくれます。

つまり↓ここまでのパスと置換されます。

https://〇〇〇.co.jp/wp-content/themes/(テーマ名)/assets/

ヘッダー、フッター、メインコンテンツをPHPで分ける

1つだったhtmlファイルをヘッダー・フッター・メイン部分で分けていきます。

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">それぞれのmetaタグ
    <script></script>それぞれのscriptタグ
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
    ここにヘッダーの中身を記述
     </header>
//ここまで

index.php

ヘッダーから下~フッターの手前まで。
下記2行も最上部と最下部に追加します!
 
最上部にヘッダーを読み込ませるコード:<?php get_header(); ?>

最上部にフッターを読み込ませるコード:<?php get_footer(); ?>

<?php get_header(); ?>
  <main>
  ここにメイン部分のコードを記述
  </main>
<?php get_footer(); ?>

footer.php

  <footer class="footer">
   ここにフッターの中身を記述
  </footer>
  <script src="<?php echo get_template_directory_uri(); ?>/assets/js/〇〇.js"></script> //JSファイルがあればここで読み込む
  </div>
  <?php wp_footer(); ?>
 </body>
</html>

 

style.cssに追記する

style.cssがWordPressでテーマとして認識してもらうために追記する事項があります。

書き方は以下を参照してください。こちらを追記します。

/*
Theme Name: サイト名(必須)
Description: テーマについての説明
Author: 作者の名前
Version: テーマのバージョン(例:1.0)
*/

functions.phpを作成する

そもそもfunctions.phpとは?

…WordPressのテーマを作成するにあたって、
様々な設定をしたり機能を追加したりできる必須ファイルです。

テーマ作成における「心臓」のようなものだと思ってください!

ではまず、ゼロの状態から「functions.php」と名付けたファイルを作成してください。

最低限、記述しておいた方がいいコードです。

※後々、お知らせ記事も投稿できるような想定にしています。

これを全てコピペしましょう!

<?php
/*
テーマのための関数
*/

// delete version
remove_action('wp_head', 'wp_generator');

// thumbnail
add_theme_support('post-thumbnails');

// editor customize
function my_tiny_mce_before_init( $init_array ) {
  global $allowedposttags;
  $init_array['valid_elements'] = '*[*]';
  $init_array['extended_valid_elements'] = '*[*]';
  $init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
  // $init_array['indent'] = true;
  if ( is_page() ){
  $init_array['wpautop'] = false;
  $init_array['force_p_newlines'] = false;
  }
  return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );

 
【解説】

// delete version
remove_action('wp_head', 'wp_generator');

→WordPressのバージョンを非公開にする。
セキュリティ上、非公開にしておいた方が良い。

 

// thumbnail
add_theme_support('post-thumbnails');

→投稿ページにてアイキャッチの画像欄を表示させる

 

// editor customize
function my_tiny_mce_before_init( $init_array ) {
  global $allowedposttags;
  $init_array['valid_elements'] = '*[*]';
  $init_array['extended_valid_elements'] = '*[*]';
  $init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
  // $init_array['indent'] = true;
  if ( is_page() ){
  $init_array['wpautop'] = false;
  $init_array['force_p_newlines'] = false;
  }
  return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );

→投稿記事の編集中にビジュアルモードとテキストモードを切り替えると、
spanやstyleなどのタグが自動で削除されてしまいます。
それを防ぐための記述です。


 

上記コードの他にもカスタマイズできることは無数にあります。
検索して他にも必要なコードがあれば追記していきましょう。

ここまでファイルを準備できたら、いよいよサーバーにアップしていきます!

サーバーにファイルをアップしよう

先ほど用意したファイルをサーバーにアップロードしていきます!

そこで事前準備として、レンタルサーバー側で、
FTPアカウントの設定を行ってください。

設定を行ったら、FTP情報をメモしておきます。

  • FTPホスト(サーバー名)
  • FTPユーザー(アカウント名)
  • パスワード

 

はい。では次に。

サーバーにアップロードするには「FTPソフト」というものが必要です。

私が推奨するのは「FileZilla」というソフトになります。

ダウンロードはこちらから

 
※ダウンロード方法、使い方等こちらのサイトがとてもわかりやすいです。

【FTPソフト】FileZillaの使い方を初心者向けに解説する

 
ダウンロードが完了したら早速、

左上の「ファイル」→「サイトマネージャー」を開きます。

開いたら、左下の「新しいサイト」を押します。

こちらにFTPアカウントの情報を入力します。
(FTPアカウントの情報は各レンタルサーバーにてご確認ください。)

※この時、右側の「ログオンタイプ」を「通常」にしておきます。

  • FTPホスト(サーバー名)
  • FTPユーザー(アカウント名)
  • パスワード

こちらを三か所にそれぞれ入力します。

できたら最後に「接続」をポチッ。

するとサーバーに接続されます。
 

WordPressもろもろのファイルが入っている階層まで入ります。
(スターサーバーの場合は「wp」というディレクトリの中にありました。)

↓もろもろのファイル


 
そこで、「wp-content」というディレクトリがあるので入ります!

 
続いて、「themes」の中に入ります。
ここに各テーマのデータが格納されています。

ではここに新しくフォルダを作ります。
(名前はなんでもいいです。テーマファイル名となります。)
 

新しいフォルダを作ったら、その中にこれらのファイルをまとめてアップします。

  • index.php
  • style.css
  • functions.php
  • header.php
  • footer.php
  • assetsフォルダ(後述)

 

そして、必要な画像やJavascriptファイルをあげるため、
ここに「assets」というフォルダも作成します。
作成したらさらにその中に以下のフォルダを作成。
※Javascriptのファイルもあれば以下「JS」も。

  • 画像:「images」
  • JS:「js」

↑このフォルダの中にファイルを全てアップしましょう~!

 
アップロードが完了したらWordPressにログインしてテーマを読み込みんでいきます!
(ログイン手順などは割愛させていただきます('ω'))

WordPress管理画面の左サイドバー、「外観」>「テーマ」を開きます。

開くと、先ほどアップロードしたフォルダ名がテーマとして反映していると思います。

そのテーマを「有効化」すると、テーマの読み込みが完了です!

以上で、TOPの1ページは完成できました!
 

お疲れ様でした( ^^) _U~~

少しでも参考になれば幸いです!

 

monomodeではエンジニアを急募しています!
ここまで読み切ったそこのあなた、ぜひこちらへ👇👇👇!

monomodeリクルートサイト
AD JOURNAL