【WordPress】テーマのサムネイル画像仕様と用意する手順メモ

Chrome > 検証 (デベロッパーツール) の Toggle device mode
スポンサードリンク

WordPress テーマのサムネイルについて

  • 880 px x 660 px の PNG 画像
  • テーマのルートディレクトリに screenshot.png のファイル名で格納

サムネイルを作成した手順

  1. Chrome > 検証 (デベロッパーツール) の Toggle device mode
  2. Screen 1320 x 990 と入力し、左のチェックを打つ。
  3. 表示されたページのスクリーンショットを撮る。
  4. プレビューアプリで 1690 x 1267 に切り取り。
  5. プレビューアプリの、ツール > サイズを調整で 880 x 660 に変更し、保存
  6. ファイル名を screenshot.png に変更
  7. ファイルを子テーマのルートディレクトリに置く。

“【WordPress】テーマのサムネイル画像仕様と用意する手順メモ”の続きを読む

【WordPress】数分で子テーマを作ります2!カスタマイズの準備♪【Twenty Fifteen】

【WordPress】数分で子テーマを作ります!カスタマイズの準備♪【Twenty Fifteen】 | oki2a24 での子テーマ作り方が、問題は無く動くけれども古くて非推奨でしたので、新しくて推奨される作り方を改めて具体的に記します。

子テーマを作るのに必要なことまとめ

  • テーマディレクトリを作成する。
  • style.css ファイルを作成する。
    • 冒頭のコメントで、Theme Name: を記述する。
    • 冒頭のコメントで、Template: を記述する。
  • functions.php ファイルを作成する。
    • wp_enqueue_style 関数で親テーマのスタイルシートをキューに入れる関数を作る。
    • wp_enqueue_scripts アクションに作った関数をフックする。

“【WordPress】数分で子テーマを作ります2!カスタマイズの準備♪【Twenty Fifteen】”の続きを読む


スポンサードリンク

【WordPress】数分で子テーマを作ります!カスタマイズの準備♪【Twenty Fifteen】

※注意※2015年2月17日追記

この投稿の作り方で最低限の子テーマを問題なく作ることができますが、スタイル(CSS)を正しくキューに入れる(HTML のヘッダーで読み込む)ことができない、少し古いやり方です。

本投稿の後日そのことに気が付き、次の投稿で修正しました。

子テーマを作るのに必要なことまとめ

  • テーマディレクトリを作成する。
  • style.css ファイルを作成する。
  • style.css 冒頭のコメントで、Theme Name: と、Template: を記述する。
  • 親テーマの style.css をインポート(@import)する。

実際の具体的な作成例

“【WordPress】数分で子テーマを作ります!カスタマイズの準備♪【Twenty Fifteen】”の続きを読む

【WordPress】子テーマのカスタムヘッダーにデフォルト画像を登録しました作業記録♪【TwentyFourteen】

スクリーンショット 2014-03-09 15.53.49.png

はじめに

わたくしたちのブログは WordPress で構築しております。テーマは、デフォルトの Twenty Fourteen をベースとして子テーマにしております♪

ただ、ヘッダー画像がありませんので設定したく存じます。まずは流れを把握したいですので 9 つのヘッダー画像で行います。今回は、その記録を投稿いたしますね♪

“【WordPress】子テーマのカスタムヘッダーにデフォルト画像を登録しました作業記録♪【TwentyFourteen】”の続きを読む

【WordPress】子テーマでも moreタグでURL末端に付く #more-xxxx を削除する

スクリーンショット 2013-07-10 20.34.48.png

以前のテーマでは、本ブログの「続きを読む →」をクリックした時の URL に手を加えまして、末尾に付きます #more-xxxx を削除するように修正を加えておりました。

新しくしました Twenty Twelve での子テーマでも同様のことを行い、しかし、若干コードを変更して実現したいと思います。

調べました♪

“【WordPress】子テーマでも moreタグでURL末端に付く #more-xxxx を削除する”の続きを読む

【WordPress】ヘッダーメニュー!ウィジェット!テーマ変更時に見落としたこと!

子テーマを、Twenty Twelve を親として作成しておりますけれども、そのようなケースに限らず WordPress テーマを変更した時に忘れがちなことをメモしておきます。わたくし、やっぱりオッチョコチョイ><。

WordPress テーマを変更した時に忘れがちなポイント

  • 外観 > メニューの、テーマの場所がリセットされたことを見逃していました><
  • 外観 > ウィジェットをざっと見なおすことを忘れていました><

ヘッダー画像は目立ちますから忘れることはないのですけれどもねー♪具体的に見ていきます♪

“【WordPress】ヘッダーメニュー!ウィジェット!テーマ変更時に見落としたこと!”の続きを読む

【WordPress】Twenty Twelve 子テーマで Jetpack 無限スクロールがソース修正なしに有効なのを訝しんで調べました♪

スクリーンショット 2013-07-08 21.58.42.png

Jetpack の無限スクロールを利用させていただいております。大変便利で面白いのですけれども、管理メニューからの設定だけでは有効にならず、テーマファイルの修正が必要でした。そのときの様子を以前、まとめました。

さて、この度、

  • テーマを Twenty Twelve の子テーマにいたしました。
  • そのとき、Jetpack の無限スクロールはオンにしたままです。

以前使用していたテーマは Twenty Eleven を改造した全く別のテーマでしたので、この状態ですと Jetpack 用のソースが子テーマには入っておりません。

よって、Jetpack 無限スクロールはオフになっていることが予想されます。

しかし!

“【WordPress】Twenty Twelve 子テーマで Jetpack 無限スクロールがソース修正なしに有効なのを訝しんで調べました♪”の続きを読む

【WordPress】Twenty Twelve 子テーマの見出しを修正するかどうか比較、考えました♪

hikaku.png

WordPress テーマ「Twenty Twelve」「Twenty Eleven」「oki2a24」の見出しを比較し、Twenty Twelve ベースの子テーマ(すでに適用済み♪)ではどうするか考えます♪

  • Twenty Twelve
    • 見出しと本文の間が一番大きい
    • h3 までは本文以上の文字サイズ
    • 全ての見出しが太文字
  • Twenty Eleven
    • h3 が見出しの中では一番小さく、本文文字サイズよりも小さい。ナンデ?
    • h3 のアルファベットが強制的に大文字に変換される。ナンデ?
    • 太文字となるのは h1、h2 のみ
  • oki2a24

本ブログの見出しをどのように変更したしましょうか?

“【WordPress】Twenty Twelve 子テーマの見出しを修正するかどうか比較、考えました♪”の続きを読む

【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】

WordPress 子テーマでヘッダー画像を設定するポイント

  • 編集するのは functions.php の 1 ファイルのみ
  • register_default_headers → 管理画面で選択できる画像を登録する関数
  • 子テーマのディレクトリパスは %2$s のプレースホルダーで定義される。親テーマの時の %s ではない。
  • add_action で after_setup_theme にフックする
  • after_setup_theme にフックする関数名は twentytwelve_setup 以外とする。親テーマのセットアップ関数を上書き(オーバーライド)したくないため。

【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします! | oki2a24 の続きとなります。このときは、子テーマのディレクトリを作って、style.css で子テーマの定義をし、同じファイルで親テーマの CSS を読み込んだのでした。続きでございまして、今回で見た目が大きく変わる予定です♪

“【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】”の続きを読む

【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします!

スクリーンショット_2013-07-02_20.48.18.png

本ブログの現在のテーマは Twenty Eleven をベースとして修正を加えたものです。そろそろ見直そうかと思います。見直して、反映したいと考えていますのは次の点です。

今回は、はじめての試みとなります「子テーマを使う方法」を確認しました。子テーマを有効にして、親テーマと同じ動き、見た目をさせるやり方、つまりは世界で一番簡単に子テーマを作る方法をノートいたします♪

“【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします!”の続きを読む