勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

WordPressでテーマの作成

   

CSSとHTMLコーディングデータがあり、それをWordPressのテーマに反映させる必要があった。ちょっとしたデザインの変更であれば既存のテーマを修正する形がよさそうだけど、今回のケースだと1から作ったほうが早そうだった。その中で今後役立ちそうな部分のメモ。

 

前提

最低限だとCSS、PHPが1ファイルずつとスクリーンショット画像のみでいけるけど、ヘッダー&フッター等の共通パーツや固定ページ用、投稿ページ用ファイルも作るものとする。

 

ディレクトリの作成

/wordpress/wp-content/themes/以下に適当な名前のディレクトリ作成する。テーマ名にするのが通例っぽい。今回はtest-themeとする。

 

メインのCSSに関して

名前はstyle.cssにする。また、そのファイルの上部に以下記述を行う。

 

スクリーンショット画像

サイズは300 x 225pxでscreenshot.jpgもしくはscreenshot.pngの画像を用意する。

 

共通パーツ

ヘッダー部分はheader.php、フッター部分はfooter.php、サイドバー部分はsidebar.phpという名前のファイルを作成し中身を入れていく。

尚、注意点としてheader.phpの<head>タグ内に<?php wp_head(); ?>を、footer.phpの</body>タグ前に<?php wp_footer(); ?>を記述しておく。これを書いておかないとプラグインとかで呼び出すCSSやJSファイルなどが呼び出されなくなる。

また、他のページから共通パーツを呼び出したい場合は以下の通り記述する。

 

TOP / 固定ページ / 投稿ページ

TOPページはindex.php、固定ページはpage.php、投稿ページはsingle.phpという名前のファイルを作成し中身を入れていく。ざっくりとだけど共通パーツを読み込んだ上で、コンテンツを表示させたい部分に以下で出力する。

尚、固定ページと投稿ページを設定したら必ずどちらかになりそうなもんだけど、そうならないページが1つあった。それはWordPressのダッシュボードで「設定→表示設定→フロントページの表示→固定ページにチェック→投稿ページ」で選択したページはindex.phpが適用された。

 

404ページ

404.phpという名前のファイルを作成し中身を記述する。「ページが見つかりませんでした」みたいな表示でもいいし、PHPでTOPページに遷移させるようプログラムを書いてもいい。

 

完成

作成したファイルを全てtest-themeディレクトリにアップロードすれば完成する。WordPressnoダッシュボードから「概観→テーマ」から選択できる筈。

 

よく使うWordPress用関数

 

リファレンス

https://wpdocs.osdn.jp/Main_Page

 

その他

最初は敷居が高いかと思っていたけど実際に作るとそうでもなかった。最低限index.php / style.css / screenshot.jpgがあればテーマとして成り立つ。

今回は触らなかったけどテーマによってはダッシュボードと連携して設定を変えられたりするものもあるので、そういうのも挑戦してみたい。

 - WordPress

  関連記事

images
WordPressのウィジェットをTOPのみ等、特定のページだけ表示する方法

■やりたかった事 TOPページのみ任意のウィジェットを表示させ、記事ページやアー ...

images
WordPressで「データベース接続確立のエラー」

WordPressで設定ファイル(wp-config.php)は触っていないのに ...

images
WordPressでNo URL was~というエラー

WordPressでmp4ファイルをアップロードして記事に埋め込んだものの、記事 ...

images
WordPressのxmlrpc.phpへの攻撃

サーバーの死活監視をしているシステムから、1つのサイトが落ちているとアラートがき ...

images
WordPress Popular Postsのサムネイルが表示されない

WordPressの人気記事を表示させるWordPress Popular Po ...

images
FeedWordPressでアイキャッチ画像も設定する方法

FeedWordPressで更新記事を取得しつつ、アイキャッチ画像も自動で設定し ...

images
WordPress記事本文の文字検索と置換方法

WordPressの記事本文内にhogeという文字列が含まれていた場合、hoge ...

images
WordPressを停止しないままサーバ移設する方法

WordPressを設置しているサーバのリソースがそろそろ危ういので移設を検討す ...

images
WordPressで任意のクエリをページ内で出力する方法

WordPressの固定ページ内でuidという任意のGETクエリを取得して、記事 ...

images
WordPressで任意のクエリをページに出力するプラグイン

先日、「WordPressで任意のクエリをページ内で出力する方法 」という記事で ...