【WordPress】TwentySixteen の子テーマ作り記録♪

完成した TwentySixteen 子テーマ
スポンサードリンク

TwentySixteen テーマは WordPress 4.4 以上が必要だそうですの。

2015年12月7日21時37分現在、まだ WordPress 4.4 はリリースされておりません。

ですけれども、TwentySixteen の子テーマをささやかながら作成し、未完成ではありますが一段落つきました。

そこでカスタマイズ内容を残しておきますの♪

全体の参考

-1. 準備

“【WordPress】TwentySixteen の子テーマ作り記録♪”の続きを読む

Material Design Lite のアイコンを自分のサーバにダウンロードして使う方法!

Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。

初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。

JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。

前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。

今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪

“Material Design Lite のアイコンを自分のサーバにダウンロードして使う方法!”の続きを読む


スポンサードリンク

【WordPress】Twenty Fifteen 子テーマ。ブログ編集時の本文フォントが正しく設定されない問題を add_editor_style 関数で解決しました♪

Twenty Fifteen 子テーマで公開した投稿のフォントを変更した時に気がついた、管理者ページ側の問題点

  • 投稿の編集ページの入力フォームフォントが Noto Serif に設定されている。タイトル入力フォームは問題ない。
  • しかしそのフォントは日本語が見つからないため設定されない

問題解決まで

  1. 設定されないフォント、Noto Serif を指定している場所を探す
  2. 親テーマの functions.php で editor-style.css を検索、修正部分を特定する
  3. Noto Serif フォント指定をしている関数を子テーマで先に書く(オーバーライド(上書き)はできないが親テーマが関数を if で囲っているため親テーマで読込させないことが可能)
  4. 子テーマディレクトリに css/editor-style.css ファイルを作り、フォントの設定を上書きする

“【WordPress】Twenty Fifteen 子テーマ。ブログ編集時の本文フォントが正しく設定されない問題を add_editor_style 関数で解決しました♪”の続きを読む

【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数

子テーマを作る時、CSS を読み込むポイント

  • 親テーマ CSS を子テーマから読み込むには、functions.php で wp_enqueue_style 関数を使用する。
  • 子テーマの style.css で @import url(“../twentyfifteen/style.css”); とする方法は古く、非推奨 ← 子テーマ – WordPress Codex 日本語版
  • 子テーマで外部の CSS を読み込む時も、同様に wp_enqueue_style 関数を使用する。用途は親テーマの CSS の読み込に限定されない。

本投稿は、【WordPress】Twenty Fifteen の子テーマを作った記録! | oki2a24 の続きですの♪「CSS の読み込み方が実は古い。」という課題を、解決しましたので記録いたしました。

実際の子テーマのソース修正部分・内容

“【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数”の続きを読む

【WordPress】Twenty Fifteen の子テーマを作った記録!

子テーマを作り始めてから完成!切り替えるまでの大まかな流れ、概要

開発環境でテーマを作り、確認、テストも済ませてから本番環境へアップロードし、切り替えるのが1番間違いのない、おすすめの方法でございます。

ですけれども面倒ですの!ですので本番環境で直接ファイルやディレクトリを作って編集しながら、でも失敗してもできるだけ簡単に復旧できるように工夫しながら進めていった方法をノートいたします♪

  • 本番環境へターミナルからログインし、CUI 環境でコマンドとエディタは Vim を使いながら進めていった

目次

“【WordPress】Twenty Fifteen の子テーマを作った記録!”の続きを読む

【WordPress】CSS の text-transform: none を!英字が大文字変換されないように修正♪【Twenty Fourteen】!

スクリーンショット 2014-01-15 0.33.02.png

ポイント

  • style.css で text-transform: none; を指定するように修正する。修正前は text-transform: uppercase;

実際にやってみましたの♪

“【WordPress】CSS の text-transform: none を!英字が大文字変換されないように修正♪【Twenty Fourteen】!”の続きを読む

【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テーマTwenty Elevenの見出し(hタグ)スタイルを修正します!

デフォルトテーマは無個性でお洒落じゃない、ださーい!、と思っていましたけど、今になってはそのようなことは細かいことです。近年の流行を敏感に捉えデザインに取り入れ、つつましくおしとやかに必要な機能と地味に最新の技術をどやぁ?と採用したデフォルトテーマ、Twenty Eleven。満足しています。・・・が、ちょっとね、修正したいです。今回は、hタグ、この見た目を修正したいと思います。

“WordPressテーマTwenty Elevenの見出し(hタグ)スタイルを修正します!”の続きを読む