JavaScript：配列内の要素をシャッフル（ランダムソート）する方法 - NxWorld
JavaScriptで配列内の要素をシャッフル（ランダムソート）する方法で、理論上は偏りなくシャッフルできるアルゴリズムとして有名なFisher–Yates shuffleを用いたものになります。 「Fisher–Yates shuffle」については割愛するので、詳しく知りたい方は「フィッシャー–イェーツのシャッフル - Wikipedia」を参照してください。 const shuffle = ([...array]) => { for (let i = array.length - 1; i >= 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } ざっくりになりますが動きとしては、まず配列内の末尾要
JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法 - NxWorld
JavaScriptで配列内の重複要素を削除・取得、配列内の重複していない要素を取得、2つの配列から共通要素・共通していない要素を取得する方法です。 中には別の方法を用いることでもっと短いコードで実装できるのもありますが、ここではいずれもfilter()メソッドを使った場合になります。 const removeDuplicateValues = ([...array]) => { return array.filter((value, index, self) => self.indexOf(value) === index); } const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5], array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1]; console.log(removeDuplicateValues(array0
JavaScript：作成・取得・追加・削除・各要素への処理など、配列に関する基本操作のまとめ - NxWorld
JavaScriptで複数のデータを取り扱いたいときに使う配列には多くのメソッドが用意されており、それらを単独または複数組み合わせて使用することで配列に様々な処理・操作を行うことができます。 ただ、JavaScriptを勉強し始めたとかこれから配列について勉強するという場合に、とりあえず漠然とメソッドを覚えてと言われても抵抗がある人もいると思うので、どんな処理ができるかやどんなメソッドがあるのかが少しでもわかりやすいように、**「この処理をしたいときにこのメソッドを使う」**のような形で基本操作としてよく使われるものをまとめて紹介します。 ここで紹介している方法の一部は「この処理を行うなら絶対にこれを使う」ということではなく、あくまで「この処理を行う方法のひとつとしてこれを使う」というものになります。 紹介している内容の一部はブラウザによって非対応のものもあります。 自身の環境で動作確認を
CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld
ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS
WordPressから送信されるメールのカスタマイズ備忘録 - NxWorld
WordPressでユーザー登録・メールアドレス変更・パスワード変更などを行った際に、管理者やユーザー宛に送信されるメールを任意の内容にカスタマイズする方法の備忘録です。 この辺をいじる頻度が低いのもあって対応方法を忘れていたり、以前はプラグイン化して対応する必要があったものがフックで可能になっていたりしたので、簡単にですがひと通りのカスタマイズ方法をまとめました。 以下の内容はいずれもWordPress Ver 5.2.2で検証したものになります。 送信者名と送信者メールアドレスを変更する デフォルトでは送信者名と送信者メールアドレスに「WordPress」と入りますが、とりあえずこれらを変更するだけであればfunctions.phpに下記を記述することでそれぞれ任意のものに変更できます。 記述後に送信されてきたメールを確認すると、送信者名が「Lorem ipsum」に、送信者メールアド
WordPress：Gutenbergブロックの表示・非表示を簡単に設定できるプラグイン「Disable Gutenberg Blocks – Block Manager」 - NxWorld
「Disable Gutenberg Blocks – Block Manager」は、その名の通りGutenbergの一部ブロックを非表示にすることができるプラグインです。 デフォルトのブロックだけでなく、プラグインで追加されたブロックについても表示・非表示を設定することができます。 紹介している内容やキャプチャなどは、WordPress Ver 5.0.3とDisable Gutenberg Blocks – Block Manager Ver 1.0.8で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Disable Gutenberg Blocks – Block Manager」を検索してインストール、もしくは「Disable Gutenberg Blocks – Block Manager」からファイルをダウンロードして環境にアップロード。 プラグ
WordPress：Gutenbergに便利なブロックを追加してくれるプラグイン 10＋ - NxWorld
Gutenbergでより凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインのまとめです。 中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。 また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。 紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。 Snow Monkey Blocks プラグイン名にも含まれている「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。 テーマと併
WordPress：Gutenberg用CSSを読み込んだり設定する方法 - NxWorld
フロントへのデフォルトスタイル適用やエディタ上で任意のスタイル適用など、Gutenberg用のCSSを読み込んだり設定する方法です。 フロントでGutenbergのデフォルトスタイルを適用 Gutenbergには一部ブロック（例えば「引用」や「テーブル」など）に適用させるデフォルトスタイルとしてCSSがあらかじめ用意されているのですが、それをフロント（公開記事）にも適用させたい場合は、下記のようにfunctions.phpへadd_theme_support( 'wp-block-styles' );を追記します。 フロント・エディタともに見栄えはすべて自身で作るのであれば必要ないとは思いますが、ある程度はデフォルトをそのまま使用する場合向けです。 add_action( 'after_setup_theme', 'nxw_setup_theme' ); function nxw_setu
VuePress入門 | NxWorld
静的サイトジェネレータ「VuePress」の導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 Node.js（Ver 8以上）が必要になるので、使っている覚えのない方や使用しているバージョンが古い方は、Node.jsをインストールまたはアップデートをしてください。 コマンドで$ node -vを入力すれば、インストールの有無やバージョン確認ができます。 「Getting Started」ではYarnとnpmそれぞれのコマンドで紹介しますが、それ以降は基本的にYarnを用いた形で紹介しているので、npmを利用している場合は置き換えてください。 紹介している内容は、VuePress Ver 0.14.8を
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に下記のように記述し、ここでは「news」というカスタム投稿で「news_cat」というカスタムタクソノミーを使用している想定のものになります。 add_action( 'restrict_manage_posts', 'add_custom_taxonomies_term_filter' ); function add_custom_taxonomies_term_filter() { global $post_type; if ( $post_type == 'news' ) { $taxonomy = 'news_cat'; wp_dropdown_categories( array( 'show_option_all' => 'すべてのカテゴリー', 'orderby' => 'name', 'selected' => get_query_var(
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();
WordPress：ページネーション設置箇所に1ページ目のみ別コンテンツを表示させる方法 | NxWorld
具体的な使用例としては、ブログやメディアなどでよく見かける1ページ目のみ「もっと見る」とか「さらに表示」のような2ページ目に飛ぶリンクが設定されたボタンを表示して、2ページ目以降は通常のページネーションを表示させるなどができます。 1ページ目と2ページ目以降とで処理を分ける 1ページ目と2ページ目以降とで処理を分ける実装には、is_paged()を使用します。 is_paged()を使って2ページ目以降かどうかを判定して、2ページ目以降だった場合はページネーションを表示させたいのでtrue時にthe_posts_pagination()を記述し、false時は2ページ目以降ではなく1ページ目ということになるので、ここにページネーションではないコンテンツを出力させるコードを記述することで、1ページ目と2ページ目以降とで異なる表示にすることができます。 よくある「もっと見る」ボタンを表示させる
WordPress：アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット - NxWorld
WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。 基本的な動作 以下では2通りの方法をあげますが、いずれも大まかには下記のような動きになっており、最終的なゴールとしては画像とalt属性を条件に応じて出力するというものになります。 画像 アイキャッチが登録されていたらそのまま使用。 アイキャッチが未登録の場合、記事内の画像をアイキャッチとして使用。 アイキャッチが未登録且つ記事内にも画像がない場合、代替画像をアイキャッチとして使用。 alt属性 アイキャッチが登録されており「代替テキスト」があれば、そのままaltとして使用。 アイキャッチが登録されており「代替テキスト」ない場合、「タイトル」の内容を
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
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：記事の削除と同時に使用されている画像も削除する方法 - 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 ); } } 記述後に記事の
サイトマップやフローチャートを手軽に作りたいときに便利なSketch素材「Flowchart kit 2.0」 - NxWorld
「Flowchart kit 2.0」は、用意されているシンボルを組み合わせていくことで簡単にサイトマップやフローチャートを作成できるSketch素材です。 様々なシンボルが用意されているので、よくある構成であれば十分対応できると思います。 以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。 大きいサイズで載せるとかなり長くなってしまうので引きのイメージではありますが、以下のようにグレースケールとダークカラーの2タイプのカードシンボルが用意されており、合わせると386種類も用意されています。 また、カードに限らず矢印・吹き出し・ラベル・デバイス・シェイプといったその他要素も豊富に用意されており、これらは3タイプのカラーがあります。 素材の中には上のようなサンプルも用意されているので、作り方や組み合わせ方の参考にしたり、少しカスタマイズして使うといったことも可
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
