GA4(Googleアナリティクス)のタグをワードプレステーマTwenty Twenty-twoのfunctions.phpに手差ししました。
カテゴリー: テーマ
これまで使用したことがあるワードプレスの「テーマ」のカスタマイズ備忘録です。
Twenty Twentyのカバーテンプレートの色調整
Twenty Twentyのカバーテンプレートは、オーバーレイの背景色と不透明度を変えると凄く印象が変わりました。
Twenty Twentyの子テーマを作る
ワードプレステーマ「Twenty Twenty」の子テーマ作成についてのメモです。
Twenty Twenty-Threeで「追加CSS」を使いたいとき
管理画面のURLの/admin/の後に、customize.phpと追記してエンターキーを押すと、昔ながらの編集画面にアクセスできる。
Cocoon用のお問い合わせフォームはJetpackのお問い合わせブロックが簡単
Jetpackを入れてる人は、「お問い合わせフォーム」ブロックが使える状態になっているので、試してみては?
Twenty Twenty-Threeを使ってみた感想
ワードプレスのデフォルトテーマ「Twenty Twenty-Three」が出ていたので使ってみました。 使用サイトはこのサイトの親サイト「てへへっと」です。 簡潔にいうと、「わかりやすいようで、わかりにくい」です。 「わ… 続きを読む Twenty Twenty-Threeを使ってみた感想
Twenty Twenty-Two 5 投稿のアイキャッチは非表示で、アーカイブのアイキャッチは表示する
投稿のアイキャッチ画像が大きくて邪魔。だけどアーカイブ(カテゴリーや日付の記事一覧)では、アイキャッチが見たい。
Twenty Twenty-Two 4 カラーパレットの編集
カラーパレットについては、ワードプレスのデフォルト以外に、Twenty Twenty-Twoのテーマ独自の5つのカスタムパレットが設定されていました。今回はそれに、自分のパレットを5つ追加しました。
Twenty Twenty-Two 3 タイトルタグを小さくする
タイトルが大きすぎて見づらいので、調整しました。指定がclampなので、大きい画面でみるとギョッとするほど大きくてドン引きします。
Twenty Twenty-Two 2 画像の上部に余白を入れる
画像とギャラリーの上部のブロックの間に余白がなくてとても見にくかったので、パッディングを入れました。
Twenty Twenty-Two 1、記述エリアを広く
コンテンツエリアの幅が狭い。けれど、記事を書く時に非常に窮屈に感じるので、広げました。
Twenty Twenty-Two (ワードプレスデフォルトテーマ)の使用感と編集履歴
Twenty Twenty-Twoは、ブロックエディタを活用するために作られた公式テーマだと思われますが、公式によるチュートリアルが少なすぎてビビる。
TwentyTwentyOne-11、クリックしたときの白背景を透明化する
久しぶりにこのブログを書いているんだけど、「あれ?、こんな仕様だったっけ?」という部分のトップが、リンクをクリックしたときの「白背景」です。 頑張って「白」を指定している、元のコードを探したんですが、見つからない。 リン… 続きを読む TwentyTwentyOne-11、クリックしたときの白背景を透明化する
Twenty Seventeen 8, ヘッダーエリアを整える
Twenty Seventeenのサイトヘッダー、ヘッダーメディア、サイトナビゲーションを調整しました。
Twenty Seventeen 7, フォントを「Yu Gothic」へ変更
Twenty Seventeenのフォントを「游ゴシック体」に変更しました。
Twenty Seventeen 6, リストマークをひっこめる
Twenty Seventeenでは、ulリストやolリストの「リストマーク」が他の行より左側に出っ張って好きじゃないので、中にひっこめました。
Twenty Seventeen 5, アイキャッチ画像を非表示にする
Twenty Seventeenの「アイキャッチ画像」が巨大すぎて画面に収まっておりませんでしたので、投稿・固定ページでは非表示に、アーカイブページではスクリーンの高さの80%に収まるように調整しました。
Twenty Seventeen 4, カラーパレットの装飾
Twenty Seventeenのカラーパレットを差し替えました。親テーマにカスタムパレットが見当たらなかったので、置き換えは不要で、自分のカスタムパレットを追記しました。
Twenty Seventeen 3, 記事一覧を要約文にする
Twenty Seventeenのアーカイブページ(最新記事、カテゴリーなど)は、投稿の全文表示だったので、抜粋に入れ替えました。テーマが意図した「read-more」を入れる方法も試してみましたが、面倒なのでfunctions.phpで置き換えました。
Twenty Seventeen 2, 1カラムへ変更
Twenty Seventeenを1カラム化しました。投稿やアーカイブなどのサイドバー付きのデザインでは、サイドバーを削除するだけ。固定ページのような元々サイドバーがついていないデザインは、追記CSSで本文幅を100%にすることで調整しました。
Twenty Seventeen 1, メインとサイドの幅調整
Twenty Seventeenを2カラム運用する際のメイン幅を大きく、サイドの幅を小さくしました。サイドバーがある「投稿」「アーカイブ」と、2カラム運用でもサイドバーがない「固定ページ」で分けて書きました。
Twenty Twenty 10、ページスピードテスト
2020年のワードプレスデフォルトテーマ「Twenty Twenty」のスピードテスト結果です。広告をつけると遅くなるのはいつものことですが、テンプレートを変えても結構変わりました。
Twenty Twenty 9、アドセンス自動広告
Googleアドセンスの自動広告コードは、一般的には、プラグインを使うっぽいのですが、これだけの為にプラグインを入れるのがイヤだったので、functions.phpに追記する形式にしました。
Twenty Twenty 8、アイキャッチ画像を小さくする
Twenty Twentyのアイキャッチ画像がデスクトップスクリーンの高さを超えていたので、「アーカイブ」と「デフォルトテンプレートの記事」に使用されるアイキャッチ画像を本文幅と揃えてみました。
Twenty Twenty 7、サイトのテーマカラー
Twenty Twentyでは、「本文エリア」と「ヘッダー&フッター」エリアの2つの背景色を自由に変更できます。選んだ背景色に合わせて刺し色と文字の色(白か黒)が自動で調整され。更に、好みのカスタムカラーを1色カラーバーから選択できます。