カスタマイズ

【WordPress】複数チェックボックスの値取得と設定反映!checkedはどうやって入れる?

plugin
設定ではよく利用するフォームのチェックボックス。1つだけのチェックボックスなら分かりやすいが複数になった場合、ワードプレスのSettings APIでのname属性の付け方から、送信したデータ(配列)を取得してその値をフォーム内のinputタグにchecked を付ける方法の解説。name属性を配列にするのがポイント。

【WordPress】フォーム内ラジオボタンにcheckedを入れる方法

wordpress
ワードプレスで独自プラグインや自作関数の設定を作る場合、よくフォームで利用するラジオボタン。チェックされた設定を保存した後、その値を読み込んでhtmlに「checked」を入れる方法の解説。ifの値比較、三項演算子の利用もあるが、ワードプレスで用意されているchecked関数を使うのが分かりやすい。

【WordPress】register_settingで初期値を設定する方法は?add_optionを使うの?

wordpress
Settings APIを使ったワードプレスの設定画面では変数の初期値をどこで設定するのかが分かりづらい。register_settingで初期値の設定方法から、add_option、update_optionを使った方法までを解説。関数リファレンスでregister_settingの第三引数に初期値の設定が無く、コールバック関数の指定だけで問題ない理由も調査したメモ。

WordPressでfunctions.phpを別ファイルに分ける方法!簡単な記述で管理をグンと楽にする

plugin
ワードプレスでfunctions.phpに自作の関数を追加する場合、コードが長くなり分かりづらい、複数の関数追加でもどこに何があるかわかりづらい、となる場合がある。ここではinclude/include_once, require/require_once, get_template_partを使ってfunctions.phpのファイルを分け外部ファイルとして読み込む方法や読み込み方の違い、使い分けをご紹介。

【WordPress】SettingsAPIの設定画面をCSSでデザインカスタマイズ

plugin
Settings APIを使った設定画面は、add_settings_sectionで指定したセクションタイトルをh2タグで囲んでくれたり、do_settings_sectionsが各フィールド(設定のための入力や選択項目)を自動で tableタグで表示してくれる。この設定画面に対してデザインカスタマイズをする方法や、CSSファイルを別ファイルに分けて読み込む方法を試してみる。

【WordPress】SettingsAPIでデータを配列にひとまとめ!チェックボックスはどうなる?

plugin
設定項目が増えるとデータベース上に変数がバラバラと増えていく。管理上も煩雑になるし作法的にも良くないようで、変数を1つの配列でまとめてみる。ポイントとの1つが複数項目を持つチェックボックス(input type checkbox)でnameを2次元配列で指定する。初期値も勿論全体を配列で指定し、サニタイズ関数(無害化)も1つの関数にまとめる。

【WordPress】設定画面へラジオボタンやチェックボックスを追加で完成形へ

plugin
Settings APIを使った設定画面で複数行入力(textarea)、ラジオボタン(input type radio)やチェックボックス(input type radio)を使ってフィールドを追加してみる。ラジオボタンやチェックボックスでは「checked」の入れ方がポイントとチェックボックスでは更にnameに配列を指定するのがポイント。

【ヘッダタイトル】文字だけのロゴ画像の作り方!背景を透明にする方法(PhotoScape編)

カスタマイズ
ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。(Cocoonなど)背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作成して...

【WordPress】投稿一覧に最終更新日からの経過日数を表示する

wordpress
ワードプレス管理画面の投稿一覧に「記事の最終更新日から何日経過しているか」の列があると良さそうですよね。記事を投稿したり最後に更新した日から何日たっているのか経過日数の表示があると、記事更新の目安にする(1カ月以上経ったら見直すなど)に活用できそうです。ということで、早速追加してみましたのでご紹介!関連)最終...

【WordPress】投稿一覧に更新日の列を追加する方法

wordpress
ワードプレスにログイン後の管理画面にある投稿一覧では、日付順(投稿日順)には見れますが、最終更新日順の列がない!更新日順の並替えができると、過去記事の見直しをする場合も、どの記事がまだ更新できてないか、最終更新順に並替えて(古い順に見たりすれば)すぐわかって便利です。ということで、実際最終更新日の列を追加して...

【CSS】ふわふわドキドキ動くボタンの作り方!上下や拡大縮小アニメーション

CSS
ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン1】【ポン!と動くボタン2】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...

【CSS】光るボタンアニメーションの作り方!カスタマイズまで手順を詳しく解説

CSS
コクーン(cocoon)などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。できあがりは、ほぼコクーンの光るボタンと同等になったと思い...

【Cocoon】タイトル下に記事抜粋(ディスクリプション)が表示されない時の対処法

wordpress
Cocoonは無料の人気のテーマで、私も賢威以外ではよく使いますし、他の方にもおすすめしたりしてます。ただ、どうもトップページの表示(記事の一覧表示)で、モバイル表示(スマホ表示)で見ると、各記事のタイトル下に記事の説明(記事の抜粋:メタディスクリプション)が表示されないようですね。(パソコンでは表示されるの...

【WordPress】プレビュー時だけ上の黒いバー(管理バー)を非表示にする方法

wordpress
投稿や固定ページの編集で「プレビュー時のみ」上段の黒いバー(管理バー/ツールバー)を非表示にする方法。ユーザー設定で管理バーを非表示にすると全ての場面で管理バーが非表示になって使いづらい。プレビューだけを判別するクラスを追加してCSSを設定すれば、投稿や固定ページのプレビュー時のみ管理バーが消え、その他の画面では表示されるのでワードプレスの使い勝手を落とさずプレビュー画面を実際の画面と同じように見ることができる。