WP自作テーマ講座

前回までfunction.phpと記述していましたが、正しくはfunctions.phpです!ファイル名を「function.php」にしている人は「functions.php」に変更してください!!すみませんでした!前回作ったウィジェットを使えるように設定していきます。

WP自作テーマ講座

私自身がWordpressを使ってウィジェット機能というものを殆ど使ったことが無く基本的に自力で実装してたことが多いので、今回学習も兼ねてWordpresのウィジェットの作り方を公開していこうと思いました。

WP自作テーマ講座

wp_head()はheadタグの中に居れましたが、wp_footerはbodyの閉めタグて前においてOKです。index.phpのみに記述しているだけだと、ライブプレビューで謎のロードだけ入って画面が切り替わらずそのままになります。なんかおかしいなと思ったらsingle.phpに記述するのを忘れていたのが原因でした。

WP自作テーマ講座

ループによる記事の取得を前回で覚えたので実際に作っていくテーマに反映させてみます。まずはトップページの記事一覧を作ってみましょう。デザインは多少崩れていても記事個々のデータが取れていたら問題なしです!

WP自作テーマ講座

テーマの土台となるHTML+CSSを用意できたので、今回はhave_postsを呼び出して記事タイトルリストを作ってみようと思います。既存のブログでテストしてもいいですし、新ブログでテストしても大丈夫です。

WP自作テーマ講座

まずはテーマの見た目を整えるのに毎回アップロードしていては、超絶非効率なのでローカル開発環境を作ってしまいましょう。まずはHTML+CSSだけでやるので特別な開発環境は必要ありません。が、メモ帳ではなくちゃんとしたエディタを使うべきです。

WP自作テーマ講座

管理画面からのアップロードで用意したCSSが反映されていなかったのですが、Wordpressのテーマ情報はCSSから読み取っているので読み込まれてはいるようです。単純にテーマの出力部でCSSが読み込まれていないだけっぽいので修正して、自由にCSSを書けるようにしていきます。

WP自作テーマ講座

今回からWordpress自作テーマの実践に突入します。まずはWordpressに自作テーマをインストールして認識させなければ始まりません。必要最低限のファイルを構築してテーマとして確立させていきます。

WP自作テーマ講座

自作テーマはそんな難しくないし簡単なので、今回はそんな難儀な人のためのWordpressテーマ自作講座を開こうと思います。本音は私がWordpressのフワフワとした状態の知識を固めるためです。別に収益化を気にしないからオリジナリティを出したいという人に刺されば嬉しく思います。

ブログ術

HTMLとCSSを打ち込み始めて気付けばかれこれ20年に到達しました。そろそろHTMLを出力するテンプレートエンジンを使ってみたくてPugを使おうと思ったのですが、せっかくなのでJSテンプレートエンジン比較をしてみました。

Page 2 of 3
1
2
3