たまろぐ

世界で一番シンプルなWordPressのテーマを作る

2019年7月3日 23:45 カテゴリー: Wordpress

この講座は完結しました!

世界で一番シンプルなWordpressのテーマを作る事にした理由

皆さんはWordpressのテーマを使っていて、

「ここをこうしたいんだけど、どこを変更したらいいんだよ!」

・・・という経験はないだろうか。僕はありました。

WordPressのテーマは無料のいくらシンプルなものでもかなり複雑な構成をしていて、後から色々変更をしようとしてもできないことがあります。

そこで、今回は

世界で一番シンプルなワードプレスのテーマ

を作って

「誰でもカスタムできるテーマ」

を作ることを目指します。

この記事を説明書代わりにカスタムしてもよし、この記事を元に自分で1から組むのもよし。そんな感じでやっていきます。

このブログで使っているテーマを解説しています。

デモサイトとテーマのダウンロード

テスト投稿とか、他の記事で使った記事があったりとか、結構雑な扱いされています。すみません。

このテーマはカスタムする事を前提で作られています。カスタムしないならワードプレスの管理画面で出てくる無料のテーマを使った方がいいです。好みに合わせてカスタムしたい方は、

このテーマを選択肢の一つにしていただけたらうれしいです。

https://tamalog.info/white/

テーマのダウンロード

DOWNLOAD!

ダウンロードしてカスタムして使いたい方は上記リンクからどうぞ!解凍して、FTPでthemesというフォルダにアップロードしてください。わからない方はこの記事のこのすぐ下から2つ目のブログカードリンクからアップロード方法を調べてください。

※追記、変更を頻繁に行う可能性があります。更新情報はTwitterで受け取ってください。

たまろぐTwitter

質問もTwitterでお願いします!

環境づくりをしよう!

まずはデザイン的なところから。どんなwebサイトにしたいか念入りに練っていきましょう。これをやっておくと進み方がかなり変わります。コーディングしている間に結局迷走するんですけどね。

この記事ではやってないですが、スマートフォンとタブレット用の表示も作っておくといいです。

まずはTerapadをインストールして、文字コードを指定して、必要なファイルを作り、FTPというソフトを使って必要なファイルをアップロードしましょう!・・・いや、難しくないですよ?詳しくは下記記事まで!ここにコードを書いて行くわけですが、文字コードが違うと文字化けする事があります。

実際に作っていく

環境が整ったところで実際にコードを書いていきましょう!

HTML編

まずは実際にページを表示するためのHTMLを組んでいきます。たくさんのファイルを編集しないとならないですが頑張りましょう!

header.php

サイトの情報と、一番上に表示される部分です。とても大事!説明する事が多すぎて、前編後編に分かれちゃいました。前編はwebのデータを入力する場所(head内)の、後編はwebの上部(ヘッダー)について解説しています。

footer.php

webページの一番下の方の表示方法を作ります。ほぼすべてのページでつかわれます。

sidebar.php

リンクや、広告、サイト情報などを表示します。自由に編集できるようにしましょう!

index.php

このファイルをアップロードすると、遂にトップページが表示されるようになります。形になると少しわくわくしてきますよね!

single.php

記事ページを表示できるようになります。HTML、PHP編もあとわずか!

404.php

必要ないけどあった方がいいかもねっていうページ。おすすめ記事とか書いてもいいかもしれないですね。

archive.php

カテゴリページやタグ、アーカイブページ等結構色々場面で使われます。

function.php

超難しいやつ。細かく考えずにコピペしてください!

CSS編

今度はデザインを司るCSSを編集していきます。少し長いですが頑張ってお勉強しましょう!

CSSの基礎知識

HTMLの構造の把握

CSSの全体の把握

ヘッダーのデザインをする。

メインエリアのデザインをするPC版

結構長いですが、難しい所は一か所くらいしかやってないです。長すぎて、スマートフォン版とPC版に分けました。

メインエリアのデザインをするスマートフォン版

サイドバーのデザインをする

記事ページのデザインをする

PC版

モバイル版

フッターをデザインする

終わりに

皆様の応援もあり、無事完結する事が出来ました。

この講座では何もわからない方がブログテーマを作ることを目的としてやっています。もしも読んでもわからないことがあったらTwitterでご連絡お願いします。

たまろぐTwitter

長い間読んでいただいてありがとうございました。