Programing beginner by koala

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ⑥「動画付き過保護説明」

前回までで大きい山は越えたかなと思います。今回は、single.phppage.phpをサクッと終え、一番楽しいcssでのデザインの部分をやっていきたいと思います(^^)

☆テーマ自作の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

毎回のことながら、ブログではサクッとコードを書いていき、動画ではコードを下記ながら説明していますので、動画を見ながら一緒にやっていただき、答え合わせとして下記のコードを見ていただければなと思います!

では始めて行きます!

Contents

single.phpとpage.phpについて

single.phppage.phpは、index.phpをコピペし、いらない部分を削除するだけになります。簡単ですね!

single.php

個別ページ(投稿記事ページ)になります。投稿したブログが表示されるページですね!

index.phpをコピペし、いらない部分を削除と、1か所だけ変える箇所があります。

※「次へ」「前へ」のリンクコード(黄色い部分)が、postsではなくpostになっているのでご注意ください!

page.php

固定ページになります。ブログのように時系列で表示する記事ではなく、会社概要や自己紹介ページのように、ブログ記事とは別に個別に表示するページになります。

今度は上記のsingle.phpをコピペし、いらない部分を削除し、1か所だけ変える箇所があります。

cssでデザインしていくよっ!!!

お疲れさまでした(T_T)

さぁここから楽しいパートのスタートです!!CSSを使って早速デザインしていきますよ。

ここからは、自作テーマを作っていないけど、カスタマイズだけしたい。。という方にとっても参考になるかなぁと思います(^^)

早速やっていきましょう!!!

cssが反映されないのはなぜ?

第1回目でもお話しましたが、Wordpressを組み込むことによって、Wordpressが自動的にhtmlファイルを生成(出力される、とか言われます)してくれます。

その際に、Wordpress用のクラス名などが変わってしまうことがあるため、それに合わせていく必要があります。

WordPress特有のクラス名、例えば、liタグならmenu-itme-数字みたいなものもあるようですので、2回目作成する時は、調べてみるといいかもです。

クラス名はどうやって調べるの?

デベロッパーツールで見ていきます!どのプラウザにおいても、そのサイトを開いた状態で右クリックすると「要素の検査」という選択肢が出てくると思うので、そこをクリックします。


※クリックすると大きくなります。

どのコードがどこなのかっていうのを、コードから探してもいいですし、私はよく分からないので、赤枠の部分を使用します。これをクリックして、サイトの知りたい部分をクリックすると、コードがその部分に飛んでくれます!

そうすると、そのタグのクラス名・ID名を確認できますね。

ヘッダーのh1タグのID名はhead-titleということが分かったので、後はこのIDにCSSを追加していけばOKです(^^)

リアルタイムで編集する方法

「追加CSS」機能を使用すれば、リアルタイムでカスタマイズが可能です!

トップページから「カスタマイズ」→「追加CSS」を選択すると、リアルタイムで編集が可能です!

デベロッパーツールを開きながら、クラス名・ID名を確認しつつ、CSSを書き込んでいくと、デザインが反映されるので楽しいかなと思います。

cssのコード

一応、私のコードをシェアしておきますね(^^)

早速アップロードして確認してみよう!!

トップページ

個別ページ

固定ページ

できましたねっ!!感動(T_T)

まとめっ!

とうとう出来ましたね!!

自分で作ったテーマは、プロが作るテーマと比べて、まだまだですが、愛着が湧きますよね!

しかも、これから自分なりに、さらにカスタマイズしていくことでより一層愛着が湧きます(←私はすでに愛いっぱいの状態です♡)!

まだまだデザインできる部分はたくさんありますが、とりあえず大まかな構成は分かったのではないでしょうか(^^)

だいたいの大枠が分かれば、後は自分が興味のある部分だけ、調べて修正したり、機能を追加していけばOKですね!

このブログでも、便利でお勧めなものがあればどんどん紹介していこうと思います(^^)

6回に渡り、お付き合いいただき、ありがとうございましたm(_ _)m

※テーマのダウンロードは下記の記事より可能です(^^)

【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら