フォローしましたようやくマガジンのタイトルにふさわしい感じがしてきました。今回はWordpressのオリジナルテーマを作成することについて書いていきます。実際のコードなんかも紹介しつつやっていきますが、「超初歩」の方をやりますので既に自作テーマ作ったことがある方には何の役にも立ちませんし、Wordpressを使ったことがない人にも何の役にも立ちません。本文最後に今回作ったテーマファイルをzipでダウンロードできるURLを書いていますのでご利用ください。Wordpressのオリジナルテーマを1日で作る本www.amazon.co.jpAmazon.co.jpで購入するちなみに全ての私の記事を読むと、ザックリこのレベルまではすぐに作れるようになります。(※急いで書いたのでレスポンシブ・ブラウザ互換その他細かい箇所はご容赦ください・・・)※アフィリエイト特化でサイトを構築したい方向けにはUdemyで講座をつくりましたのでどうぞ。これはWordpressのテーマが1つ付属しますからお得です!https://www.udemy.com/course/wordpress-blog-affiliate/?referralCode=57F847D7776587A3275E1.構成を知るWordpressを使ったことがある人は「テーマ」を色々使ったことがあると思うんですよね。あーこれは使いにくいなぁとか、これはデザインは良いけど微妙だなぁとか。一度いちから作ってみると自分だけのやり方を確立できますし、サイト制作のお仕事にも有利になります。Wordpressのお仕事ってのは引き合いが多いので、この機会にちょっとでもやってみると良いと思います。今回の読み物を読めば、カンの良い方はただのHTMLサイトをWordpressへまるっと移植することも理解できるようになる・・・と思います。Wordpressの「テーマ」というのはざっくり言って以下の構成になっています。最初はこれだけ覚えておけば大丈夫なんじゃないですかね。header.phpとfooter.phpは常に呼び出されて、トップページならindex.phpが。固定ページならpage.phpが。ブログ投稿ページならsingle.phpが呼び出されて合体すると考えていいかと思います。テーマとして機能させるためには以下のファイルが必須になってきます。・index.phpトップページだと思ってOKです。HTMLべた書きで大丈夫。・header.phpbodyのスタートからロゴ・メニューエリアあたりをカバーします。・footer.phpページのフッターです。コピーライトとかですね。・category.phpブログ投稿の一覧ページだと考えておいてください。・page.php固定ページ、所謂会社概要とかそういうのですね。・single.phpブログとか、お知らせなど「投稿」から作るページです。・functions.php設定ファイルだと思ってください。・style.cssメインのCSSファイルです。他にも命名ルールがいっぱいあったりするんですが、今回は割愛します。archive.phpというのも最初から存在していますがcategory.phpの方が「強い」のでcategory.phpがあれば大した影響はないと思います。2.実際のコードを見てみるまず詳しく理解するまでは決まった形式で書くことが多いfunctions.phpをご紹介します。<?phpこれだけです。Wordpressに存在する色々な機能を使わない場合はこれで動きます。functions.phpはかなり細かく設定を書くことも、使いたい機能だけ書くこともできるのである程度自作テーマに慣れてきて「やりたいことが増えた」ときに書くようにするとストレスフリーになれますし、「ある程度理解できてから」ググるようになるので理解がより一層深まります。最初の初歩の段階でfunctions.phpに頭を悩ませるのはやめたほうが良いな、というのが個人的見解です。次にfooter.phpを見てみましょう。これはヘッダー同様、何度も同じフッターを書くの面倒くさいよね?ということですべてのページに同じように表示されるエリアとなります。</body></html>終わり。全ページで表示させたい内容がある場合は追記するだけ。今はこれだけで充分だと思います。次にheader.phpを見ていきましょう。これも凄くシンプルに書きますね。</header>これだけでスタートします。いう記載がありますが、これはテンプレートのURLを払い出ししていると思っていただいてOKです。所謂テーマのディレクトリパスを発行しているコードなわけですね。覚えておくとすごく便利なのでここだけ抑えておいてください。index.phpを書いていきます。get_footer();?>はfooter.phpを呼び出します。get_footer();?>おっと、single.phpとpage.phpを忘れていましたね。細かいことは後から学べばいいので実際のところ同じことを書けばOKなのです。非常にざっくり解説すると、「投稿」が存在する場合はその投稿をまるごと表示しなさい。いう命令が書かれています。?>・・・ifとwhileを終了させますcategory.phpもほとんど同じで以下のようになります。?>category一覧でタイトルとリンクだけ表示させるシンプルなものです。style.cssにオリジナルテーマであることを書き込んで一旦終了です。あなたのURL*/これで終わり!ブラウザで確認すると、こんなふうにWordpressのサイトが出来上がっているはずです。あとはCSSでお好きに調整すれば見栄えもバッチリですね。カンの良い方は既に気がついたと思いますが、index.phpにいつも作っているサイトのHTMLをべた書きすればWordpressへの移植も簡単になりますよね。いつもと違うな」となることが多々あると思います。その疑問が次に繋がる気がします。以下URLより今回作ったファイルをダウンロードできます。https://development.jiriki.co.jp/download/origin01.zipダウンロード#wordpress#オリジナルテーマ#超初歩この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。当マガジン・記事をサポートいただけると幸いです。役に立つ記事を書く励みとなります。サポートをする「スキ」を押してクリエイターを応援しよう!ありがとうございます!28Gen6尼崎生まれの会社経営者14年目、ITアドバイザー/グロースハッカー。GHAWARD2017においてスマートフォン賞と不動産賞を受賞。Kindle本を7冊ほど出してます。超初歩カスタマイズこの記事が入っているマガジンnote編集部お気に入りマガジン様々なジャンルでnote編集部がおすすめしている記事をまとめていきます。開発チームFigmaの使い方、全力でまとめました。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。