勉強したことのメモ

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で逆アクセスランキングの設置

WordPressに逆アクセスランキングを設置したかった。 ただ、広告が出ないタ ...

images
WordPressを外部サーバから投稿する方法

WordPressをダッシュボードからではなく、外部サーバのプログラムから投稿し ...

images
WordPressにてフッターへ出現する笑顔マーク(smiley)を見えなくする方法

■やりたい事 WordPressにて左下へ勝手に出現する笑顔マーク(smiley ...

images
WordPress4.0の新機能

WordPress4.0への更新が出来るとダッシュボードに書いてた。 互換性で変 ...

images
WordPressサイトのロードアベレージが高い

あるWordPressサイトのロードアベレージが先月ぐらいまでは通常0.5前後で ...

images
WordPressでメモリを節約しつつ高速化する設定方法

メモリ1GのVPSを借りてWordpress以外にも、ちょいちょいものを置いてい ...

images
WordPressでタグやカテゴリの複数検索

WordPressでカテゴリのアンド検索や、タグとカテゴリの同時検索を行いたかっ ...

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

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

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

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

images
contact form7で送信数を測定

contact form7でフォーム送信が完了した時点で計測されるようにトラッキ ...