WordPress：Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法 - NxWorld
WordPress 5.5のリリースに伴いGutenbergへ新たに追加されたブロックパターンのカスタマイズで、デフォルトで用意されているブロックパターンやパターンカテゴリで不要なものを削除したり、逆にオリジナルのブロックパターンやパターンカテゴリを追加する方法です。 ブロックパターンを削除する ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。 それらが不要な場合はunregister_block_pattern()を用いてfunctions.phpへ下記のように記述します。 add_action( 'init', 'remove_default_block_pattern' ); function remove_default_block_pattern() { $patterns =
CSSで様々な背景パターンを実装できるスタイルシート「pattern.css」 - NxWorld
「pattern.css」は、任意の要素に特定のclassを付与するだけで様々な背景パターンを適用することができるスタイルシートです。 チェック・ドット・ライン・ジグザクなど種類も豊富で、CSSなのでサイズ調整やカラー調整も容易にできるようになっています。 イメージは配布サイトの一部をキャプチャしたもので、これらもすべてCSSのみで再現された背景パターンになります。 使用する際は必要なCSSを読み込んで、適用したい要素に.pattern-{type}-{size}のようなルールでclassを付与します。 サイズはsm, md, lg, xlの4種類の中から先述したclassルールの{size}部分に任意のものを指定し、{type}にはどのような背景タイプを使用するかを下記12種類の中から指定します。 Checks .pattern-checks-{size} Grid .pattern-
デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
WordPress：管理画面の一覧ページにカスタムフィールドの値を表示する項目を追加する方法 | NxWorld
例として「cf_example」という名前のカスタムフィールドの値を「投稿」の一覧画面で表示したい場合は、functions.phpに下記のように記述します。 function add_posts_columns( $columns ) { $columns['example'] = 'サンプル'; return $columns; } function custom_posts_column( $column_name, $post_id ) { if ( $column_name == 'example' ) { $cf_example = get_post_meta( $post_id, 'cf_example', true ); echo ( $cf_example ) ? $cf_example : '－'; } } add_filter( 'manage_posts_colum
WordPress：管理画面のカテゴリーやタクソノミー一覧ページにID（タームID）項目を追加する方法 | NxWorld
いちいちリンク部分にホバーしてリンク先のURLを確認したり詳細ページで確認したりする必要がなくなるので、何らかの理由で頻繁にIDを確認するときに便利です。 以下ではカテゴリーとカスタムタクソノミーとでそれぞれ紹介していますが、いずれも実装後はイメージの一番右のように「ID」という項目が追加されるようになります。 また、項目の追加に加えてここに昇順・降順を切り替えるソート機能も実装していきます。 カテゴリーの場合 デフォルトの「投稿」に用意されているカテゴリー一覧ページでID（タームID）項目を追加したい場合は、functions.phpに下記のように記述します。 function add_category_columns( $columns ) { echo '<style> .taxonomy-category .manage-column.num {width: 90px;} .tax
WordPress：固定ページ一覧に使用中テンプレートの項目を追加する方法 - NxWorld
実装後はイメージの一番右のように「テンプレート」という項目が追加され、そこにそれぞれページで使用しているテンプレート名が表示されます。 実装にはfunctions.phpに下記のように記述し、この場合はテンプレートとして使用しているファイルのTemplate Nameに設定しているテンプレート名が表示されます。 function add_pages_columns( $columns ) { $columns['template'] = 'テンプレート'; return $columns; } function custom_pages_column( $column_name, $post_id ) { if ( $column_name == 'template' ) { $template = 'Default'; $templates = get_page_templates();
VS Code：WordPress構築時に便利な拡張機能まとめ - NxWorld
絶対に入れておくべきとまではいきませんが、入力補完やドキュメント参照が容易にできるなど慣れると手放せなくなるようなものもいくつかあるので、VS Codeを利用していて普段からWordPressを触る機会が多い人は試してみてください。 WordPress Toolbox WordPressの関数・クラス・定数を入力補完してくれる拡張機能で、現時点の最新版であるVer 4.9.8にも対応しています。 展開時には引数付きで出力してくれる機能もあり、展開したコード内にある引数の選択部分をtabまたはshift + tabで移動させることもできます。 例）add_filter()を引数表示有りで展開 add_filter( $tag:string, $function_to_add:callable, $priority:integer, $accepted_args:integer )
VS Code：ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能「Live Server」 - NxWorld
VS Codeで簡易ローカルサーバーを起動できる拡張機能「Live Server」を紹介します。 ファイル更新を検知して自動的にブラウザをライブリロードしてくれる機能もついているので、コードを書きながら表示確認の度にブラウザリロードする手間を省くことができます。 インストール 拡張機能は「Live Server - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は Live Server と検索すれば該当の拡張機能が出てくると思います。 その後、エディタを再起動させればインストール完了になります。 使い方 サーバーの起動 拡張機能の有効化後、ワークスペース内にあるファイルを開くとエディタ右下に画像のような「Go Live」という文字がアイコンとともに表示されるの
CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
wp-mwform-change-mail-recipient-using-select-or-radio-button.html
WordPressで確認・完了画面付きの問い合わせフォームを実装したいときに便利なプラグイン「MW WP Form」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信する動きとします。 項目A → type-a@example.com 宛に送信 項目B → type-b@example.com 宛に送信 項目C → type-c@example.com 宛に送信 まず、フォーム作成画面では特別な記述などはせずに一般的な形でセレクトボックスやラジオボタンを配置し、上の項目名を設定する場合は、それぞれ下記のような形になると思います。 また、自動返信メールなどで項目Aや項目Bといった文言を表示させたいときは、いつも通り{type
WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 - NxWorld
WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信する動きとします。 項目A → type-a@example.com 宛に送信 項目B → type-b@example.com 宛に送信 項目C → type-c@example.com 宛に送信 上のような動きになるようにセレクトボックス（select）を配置したい場合は、下記のようにパイプ（|）を用いてパイプ前にフロントで表示させる文言を、パイプ後に送信先に設定したいメールアドレスを記述します。 [select* type "項目A|type-a@example.c
WordPress：記事の削除と同時に使用されている画像も削除する方法 - NxWorld
add_action( 'before_delete_post', 'nxw_delete_post_attachment' ); function nxw_delete_post_attachment( $post_id ) { $args = array( 'numberposts' => -1, 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_status' => 'any', 'post_mime_type' => 'image' ); $attachments = get_children( $args ); foreach( $attachments as $attachment ) { wp_delete_attachment( $attachment->ID, true ); } } 記述後に記事の
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10 - NxWorld
初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。
WordPress：「Advanced Custom Fields」の「関連」フィールドのカスタマイズ備忘録 - NxWorld
WordPressでカスタムフィールドを扱いやすくするプラグイン「Advanced Custom Fields」にある「関連」フィールドで、現在の記事を除外する、下書き・非公開記事の非表示、並び順を変えるなど、表示される記事内容をカスタマイズする際の備忘録です。 紹介する内容は「Advanced Custom Fields」を既に使用（有効化）している想定のものになります。 現在の投稿を除外する 新規投稿時には気になりませんが、デフォルトでは「関連」フィールド内に該当するすべての投稿が表示されるので、編集時などに現在編集している投稿も表示されます。 ほとんどの場合は現在の投稿を関連投稿として選択することはないと思うので非表示にします。 「関連」フィールド内の出力をカスタマイズしたい場合は、主にacf/fields/relationship/queryのフィルターフックを利用します。 実装に
class付与でインスタグラム風のフィルターを適用できるスタイルシート「Instagram.css」 - NxWorld
インスタグラムは用意されているフィルターを適用することでイメージの見栄えを変更できるようになっていますが、「Instagram.css」はそれをCSSを使って再現できるスタイルシートです。 デフォルトでは表示されていないものも含めた全41種類のフィルターをclassを付与するだけで適用することができます。 使い方はGitHubからダウンロードするなどしてCSS（instagram.css or instagram.min.css）を読み込み、あとは下記サンプルコードのように適用したいimgを括っている要素に特定のclassを記述することで、元イメージはそのままで簡単にインスタグラム風のフィルターを適用できます。 GitHubで記載されているサンプルコードではfigure要素に対してclassを付与していますが、下記のようにdivなど別の要素でも可能です。 classは.filter-{fi
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress：投稿一覧への項目追加時に任意の位置へ追加する方法 | NxWorld
WordPress：管理画面の一覧ページにタグで絞り込む機能を追加する方法 | NxWorld
CodePenで公開されている、CSSを使ってIsometric（アイソメトリック）な見栄えを実装したデモ 15 | NxWorld
