カスタマイズ

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

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

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

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

WordPressの目次をスクロール連動&自動ハイライト!Cocoonでの実装手順を紹介

wordpress
WordPressでは記事の冒頭に目次を入れることが多いですが、サイドバーに表示している人もいますよね。目次があれば全体の流れがつかめて便利ですし、サイドバーでは「今どこを読んでいるか」がハイライトされたりすると更に親切。特に長い記事では読む側も現在地が分かってとても助かります。ということで、今回はスクロール...

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

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

【CSS】次の要素ありなしで表示を変える方法

CSS
以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。たとえば記事の先頭によくある、カテゴリ、タグの表示などで、1つしか表示する要素がなければ、それだけを表示する。複数(つまり次の要素が)あれば、スラッシュ( / )で区切って表示するなんていう場合がありますよね。<要...

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

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

【WordPress】記事タイトルHTMLタグを入れる方法!ブラウザ向け対応も忘れずに

カスタマイズ
この記事のタイトルは、一部色が変わっていたり「!」の後に改行されていたりと、タイトル(H1)にHTMLタグが入ってます。このブログでは「Coccon」というテーマを使ってますが、「Lightning」や「Luxeritas」など他のテーマでも同じことができますね。ここではワードプレスにおいて、記事タイトル(H...

【Cocoon】スマホメニューの検索をアドセンスの検索エンジン広告に置き換える方法

wordpress
人気の無料テーマ「Cocoon」でスマホ表示したときに、下部のメニューに検索が表示されますが、これをグーグルアドセンスの検索エンジン広告に置き換える2つの方法を試してみました。置き換えたい箇所は「スマホ表示時のメニュー」(「モバイルスライドインメニュー」と呼ばれるもの)内にある検索。「検索」(虫眼鏡アイコン)...

【WordPress】管理画面のプラグイン一覧にリンクメニュー(設定)を追加する方法

カスタマイズ
プラグインを作成してワードプレスの管理画面からプラグイン一覧を表示した時、「有効化」「停止」「削除」といったメニューがプラグイン名の下に表示されます。この他にも「設定」へのリンクメニューを持つプラグインがありますが、こうしたメニューがあるとすぐ設定画面へと行けて便利ですよね。ということで、自作したプラグインに...

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

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

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

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

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

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

【WordPress】記事一覧で抜粋の文字数を揃えたい!全角半角混在でも同じにする方法

theme
ブログの記事一覧では、記事のタイトル下に記事の抜粋が表示されると思います。この抜粋、日本語の全角文字や全角記号、半角の英数記号が混在の場合、全角文字が多いか半角文字が多いかで見た目の文字の量も異なり、抜粋の表示を全体で見たとき整って見えない。細かいところですが、この「全角文字、半角文字」が混在でも見た目的に文...

【Cocoon】スマホ表示時のアドセンス検索エンジン広告!8つのレイアウトの表示のされ方

wordpress
Cocoonのスライドインメニュー(スマホ表示の下部メニュー)をアドセンスの検索エンジン広告に置き換えた時の見え方をチェックしました。アドセンスの検索エンジン広告は、見え方(レイアウト)を複数の中から選べますが、結果としては「Googleがホスト」のレイアウトが良さそうです。関連)【Cocoon】スマホメニュ...

【Cocoon】モバイルメニューカスタマイズ:テーマファイルのダウンロードとアップロード

wordpress
Cocoonでモバイルメニュー(スライドインメニュー)の「検索」ボタンをアドセンスの検索エンジン広告に差し替える、といったカスタマイズなどでは、テーマファイルのダウンロードやアップロードが必要になります。この場合、対象ファイルは「mobile-search-button.php」になりますが、ここではそのダウ...