・・・という経験はないだろうか。WordPressのテーマは無料のいくらシンプルなものでもかなり複雑な構成をしていて、後から色々変更をしようとしてもできないことがあります。そこで、今回は世界で一番シンプルなワードプレスのテーマを作って「誰でもカスタムできるテーマ」を作ることを目指します。この記事を説明書代わりにカスタムしてもよし、この記事を元に自分で1から組むのもよし。そんな感じでやっていきます。このブログで使っているテーマを解説しています。デモサイトとテーマのダウンロードテスト投稿とか、他の記事で使った記事があったりとか、結構雑な扱いされています。このテーマはカスタムする事を前提で作られています。カスタムしないならワードプレスの管理画面で出てくる無料のテーマを使った方がいいです。好みに合わせてカスタムしたい方は、このテーマを選択肢の一つにしていただけたらうれしいです。https://tamalog.info/white/テーマのダウンロードDOWNLOAD!ダウンロードしてカスタムして使いたい方は上記リンクからどうぞ!解凍して、FTPでthemesというフォルダにアップロードしてください。わからない方はこの記事のこのすぐ下から2つ目のブログカードリンクからアップロード方法を調べてください。※追記、変更を頻繁に行う可能性があります。更新情報はTwitterで受け取ってください。たまろぐTwitter質問もTwitterでお願いします!環境づくりをしよう!まずはデザイン的なところから。どんなwebサイトにしたいか念入りに練っていきましょう。これをやっておくと進み方がかなり変わります。コーディングしている間に結局迷走するんですけどね。この記事ではやってないですが、スマートフォンとタブレット用の表示も作っておくといいです。WordPressのテーマの構想を練るまずはTerapadをインストールして、文字コードを指定して、必要なファイルを作り、FTPというソフトを使って必要なファイルをアップロードしましょう!・・・いや、難しくないですよ?詳しくは下記記事まで!ここにコードを書いて行くわけですが、文字コードが違うと文字化けする事があります。必要なファイルをアップロードする実際に作っていく環境が整ったところで実際にコードを書いていきましょう!HTML編まずは実際にページを表示するためのHTMLを組んでいきます。たくさんのファイルを編集しないとならないですが頑張りましょう!header.phpサイトの情報と、一番上に表示される部分です。大事!説明する事が多すぎて、前編後編に分かれちゃいました。前編はwebのデータを入力する場所(head内)の、後編はwebの上部(ヘッダー)について解説しています。header.phpの中身を作るhead編/wordpressテーマ自作!header.phpを作るヘッダー編/WordPressのテーマを自作する!footer.phpwebページの一番下の方の表示方法を作ります。すべてのページでつかわれます。wordpressのテーマを自作するsidebar.phpリンクや、広告、サイト情報などを表示します。WordPressのテーマを自作するindex.phpこのファイルをアップロードすると、遂にトップページが表示されるようになります。wordpressのテーマのを自作するsingle.php記事ページを表示できるようになります。wordpressのテーマのを自作する404.php必要ないけどあった方がいいかもねっていうページ。おすすめ記事とか書いてもいいかもしれないですね。WordPressのテーマを自作するarchive.phpカテゴリページやタグ、アーカイブページ等結構色々場面で使われます。archive.phpfunction.php超難しいやつ。今度はデザインを司るCSSを編集していきます。WordPressのテーマ自作するHTMLの構造の把握CSSを書く前にHTMLを確認する。WordPressのテーマを自作する。WordPressのテーマを自作する!ヘッダーのデザインをする。長いですが、難しい所は一か所くらいしかやってないです。長すぎて、スマートフォン版とPC版に分けました。WordPressのテーマを作るサイドバーのデザインをするCSSでサイドバーをデザインする。WordPressのテーマを作る記事ページのデザインをするPC版CSSで記事ページをデザインする。WordPressのテーマを作るモバイル版CSSで記事ページをデザインする。WordPressのテーマを作る終わりに皆様の応援もあり、無事完結する事が出来ました。この講座では何もわからない方がブログテーマを作ることを目的としてやっています。読んでもわからないことがあったらTwitterでご連絡お願いします。たまろぐTwitter長い間読んでいただいてありがとうございました。https://tamalog.info。