カスタマイズ

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

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

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

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

【WordPress】抜粋を入力するとそのまま表示される?文字数制限や「続きを読む」を付ける方法

theme
ワードプレスでサイドバーにある「抜粋」を入力すると、記事の一覧表示でタイトル下に表示される抜粋の文字数が制限なくそのまま表示されたり、文字が切れるときの記号というか「続きを読む」表現が付かない、なんてことがありますね。使っているテーマによるものですが、たとえば私が利用しているテーマ「賢威」では、抜粋の入力あり...

【WordPress】画像に枠を付けるとぼやける?等倍で綺麗に表示する方法

CSS
画像にフレームというか枠をCSSで付けると、画像が等倍で表示されず「ぼやける」「滲む」(にじむ)場合があります。(特に画像に文字が入っていると気になったりしますよね)枠の分だけ画像が縮小されることが原因ですが、その場合CSSの設定はどうするのが良いか、ぼやける理由の詳細や、ぼやけない画像の基本、ワードプレスの...

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

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

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

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

【WordPress】プラグインを公式ディレクトリに登録する手順を詳しく解説!

wordpress
ワードプレスのプラグインを自作したら一度は公式ディレクトリに申請して、実際にプラグインがワードプレスで検索できたりすると嬉しいですよね。^-^)ここでは「Ad Auto Insert H」(広告自動追加 H)という、アドセンス広告を記事内の見出し前に自動で追加するプラグインを公式ディレクトリに申請して、実際に...

【WordPress】URLに#038;が入るのはエスケープ処理が原因?具体事例と解決法のご紹介

カスタマイズ
「&」はHTMLエンティティ( & と ; で囲まれた文字列)の1つで、HTMLでは「&」(アンパサンド)を示すものになりますね。( 「&」も「&」に同じ)ワードプレスの自作プラグインとかでWP_Queryを使って記事の一覧表示させてページネーションを付けた場合、ページネーションの...

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

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

【WordPress】設定画面の作り方|初心者にも分かりやすく解説!

plugin
Settings APIの基本の使い方。add_action( admin_menuフック)で管理画面の設定へメニューを追加して、add_options_pageで実際に基本となるサンプル設定の画面を作成。まずはURL入力(input type text)1つだけの設定画面を作り、セクション、フィールドの追加など基本の形をおさえる。

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

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

WP_Queryでページネーションできない!管理画面や設定ページではget_query_varが使えない?!

カスタマイズ
WP_Query() で特定の記事一覧を表示する場合、ページネーション(1ページ目、2ページ目など表示しているページ数を示す数字のリンク表示)では、get_query_var() でページ番号を取得してpaginate links() でページリンクの表示をしたりします。どうやら WP_Query() は投稿...

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

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

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

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