サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
wemo.tech
アコーディオンの実装について、アクセシビリティを配慮した時の実装方法はどうすべきか、改めて考えてみました。 (2022年10月) 今回目標とする実装について先にまとめておくと、 アクセシビリティに配慮して実装したい。Tabキーで選択でき、エンター・スペースキーの両方で開閉可能である。スクリーンリーダーでの読み上げもおかしくならないようにする。展開アニメーションを付けたい。アイコンも独自のものを使用し、アニメーションさせたい。 ってな感じです。 ちなみに、IEについてはガン無視してます。 アコーディオンの開閉アニメーションの実装方法について height: autoを使うと、heightのtransitionアニメーションが動作しないという問題があるため多くの場合はJSで開閉アニメーションを実装すると思うのですが、個人的には以下の記事で紹介しているごまかしアニメーションで十分だと思っています
echo $user->ID; //ユーザーID echo $user->user_login; //ログインID echo $user->user_nicename; //サニタイズ後のログインID echo $user->user_email; //登録メールアドレス echo $user->user_status; //ユーザーステータス echo $user->display_name; //WordPress上の表示名 object(WP_User)#1280 (7) { //基本データオブジェクト ["data"]=> object(stdClass)#1250 (10) { ["ID"] => string() "ID名" ["user_login"] => string() "ログイン名" ["user_pass"] => string() "パスワード (暗号化済み)"
WordPressのカスタマイズにおいて欠かせないのが、アクションフックとフィルターフック。 今回はこの「アクションフック」の方について知識をつけていこう! ということで、WordPressの主要なアクションフックの実行順序について検証してきたので、メモしておきます。 どのアクションが早くてどのアクションが遅いのかを、フロント側で実行される20種のアクションフックについて調べてみました。(全部のアクションフックを検証するのはきつすぎた...。笑) 全アクションフックはここで確認できます:Codex日本語版:プラグイン API/アクションフック一覧 検証結果:主要なアクションフックの実行順序一覧 先に結果を。 今回の検証で確認できた実行順序は次の通りでした。 after_setup_themeset_current_userregistered_post_type(複数回実行)registe
WordPressの勉強を始めようとすると、基本的には「テーマ」の作り方についての情報ばかり出てきます。 しかし、 既存テーマを自分でちょろっとカスタマイズしたい時細かい部分のカスタマイズだけで済む案件 などのケースでは、わざわざ子テーマを作成するより、プラグインを作ってカスタマイズする方が色々と便利なんじゃないかなと思うんですよね。 ...というようなことを前々から思ってたんですが、今朝Snow Monkey制作者のキタジマさんが以下のようにツイートしてたのを見て、衝動的にこの記事を書いております。 WordPress の学習法、テーマをつくるというのが多いと思うんだけど、僕的にはテーマより先にプラグインをつくるのがおすすめ。いきなりテーマやると HTML コーディングの延長になりがちだと思うんだけど、プラグインだとちゃんとフックを使わざるを得ない。 — キタジマタカシSnow Monk
function is_IE() { $ua = mb_strtolower( $_SERVER['HTTP_USER_AGENT'] ); //すべて小文字にしてユーザーエージェントを取得 if ( strpos( $ua,'msie' ) !== false || strpos( $ua, 'trident' ) !== false ) { return true; } return false; } <?php if ( is_IE() ) : ?> <div class="ie_alert"> <span>Internet Explorer、ダメ絶対!</span> <p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br> 言ってしまえば、百害あって一利なしの老害です。<br> 世界中で、多くのWEB制作者があなたの
2020年3/31にWordPress5.4がリリースされましたね。 すでに変更点などをまとめてくれている記事もたくさんありますが、自分の目で確認しないと気が済まない派なので、実際に触っていきながら変更点についてまとめていこうと思います。 今回のアップデートでもブロックエディター(Gutenberg)がかなり進化しているようなので、特にその辺について詳しく書いていきたいなと。 記事中に使うスクリーンショット画像などはできるだけデフォルトテーマのTwenty Twentyを使って撮影していますが、中にはSWELLを使ったものが混ざってしまうかもです。 了もし間違った情報があれば、コメントかTwitterでお知らせください! ブロックエディター関連(見た目の話) まずはユーザーとしてブロックエディターを普通に使う上での変更点をまとめていこうと思います。 内部のコード的な話などはここではあまり触
Prettier・ESLint・Stylelintの3つを導入PrettierとESLintを連携させるPrettierとStylelintを連携させる かつ、ファイル保存時に自動で処理を走らせるよ! Prettier・ESLint・StylelintをVS Codeに導入するのにつまづいた点 まず最初に、自分が何につまづいて、結局それがどういう解釈で落ち着いたかを述べておきます。 本当に名前を聞いたことくらいしかないレベルで導入に踏み切ったので、わけのわからないことだらけでした...。笑 Prettierとかはnpmでインストールするの?それともエディターの拡張機能を使えばいいの?PrettierとESLint / Stylelintの関係性がそもそもよく分かっていない。そのため、併用する意味もよくわかっていない。 上記3点が、とても困惑してしまった原因だったかと思います。 ① npmで
CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 2019 9/02 CSSで要素を横並びにしたいときに非常に便利なflexboxですが、「最初や最後の一つだけ並び順を逆にしたい...!」という時にどうすればいいのかパッと分からなかったので調べてきました。 「一つだけ並び順を逆に」というのは例えば、3つ並べる要素のうち、2つは左寄せでいいけど最後の1つは右寄せがいい、という場合のことです。 この記事のアイキャッチ画像にある3つのボックスの状態ですね。 floatを使っている時は一つだけrightにするなどすれば簡単に実現できたのですが、flexboxでは少し特殊な方法になります。 方法1:flexboxを入れ子にする これは今回紹介したいメインの方法ではないので詳しくは紹介しませんが、まず最初に思いつく方法ではないかなと思います。 flexboxを入れ子に
マウスカーソルに半透明のドットが追従してくるようなサイトを見かけたことはありませんか? これを「マウスストーカー」というらしいのですが、今回はこのマウスストーカーをjQueryなしのJavaScriptで作る方法をメモしていきます。 ただ単にマウスカーソルにドットがついてくるだけだと味気ないので、リンク(アンカータグ)にマウスホバーすると、そのドットが大きくなって吸い付くような演出も加えたバージョンで実装してみました。 今回作っていくマウスストーカーは以下のものです。(PCでみてね) See the Pen リンクに吸い付くマウスストーカー by ddryo (@ddryo-the-encoder) on CodePen. まずは単純なマウスストーカーを作成してみよう 半透明なドットがマウスカーソルについてくるだけの、シンプルなマウスストーカーを作成してみます。 【デモ】シンプルなマウスス
Swiper+CSSのみ!ズームアップしながらフェードインで切り替わるスライダーの実装方法 2019 8/29 jQuery不要の高機能スライダープラグインとして有名な「Swiper」、便利ですよね。 実はこのSwiper、表示中のスライドとその前後のスライドに特有のクラスが付いていまして、それを活用してちょろっとCSSを加えるだけで、ズームインしながらフェードで切り替わる効果をつけることができたりもします。 今回は、その方法をご紹介していこうと思います。 以前別の記事で、外部プラグインもjQueryも使わずに同様のズームアップ&フェードのスライドを自作する方法を紹介したのですが、それよりもかなり簡単に実装できるんじゃないかなと思います。 Swiperの機能をベースにしているので、でページャーとかもそのまま簡単に使えますし、CSSアニメーションの内容を変えるだけでいろんなパターンの効果を実
【脱jQuery!】ネイティブなJavaScript(Vanilla JS)への書き換え方まとめ 2019 12/15 最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。 ...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS(Vanilla JS)への書き換え方をまとめていこうと思います。 というか、本当に脱jQueryしたほうがいいの? ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。 ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。 ※ 書きかけの部分やら中途半端なもありますが、ご了承ください。
【PHP】出力したいテキストからURLを自動で検出し、aタグで囲んでリンク化する方法 2019 9/03 PHPでテキストの内容にURLが含まれていればそれを検出し、自動でURLをaタグで囲んでリンク化させる方法をメモ。 WordPressで、「カスタムフィールドの入力エリアにaタグ打ち込んでもエスケープ処理されてリンクにならない!」ってケースでURLをリンク化してほしい場合などに使えます。 流れとしては非常に単純で、正規表現でURL部分を検出し、preg_replaceでaタグで囲むように置換するだけ。 $text; //対象のテキスト $pattern = '/((?:https?|ftp):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]+)/'; $replace = '<a href="$1">$1</a>'; $text = preg_replace
そろそろSEOをちゃんと勉強しようと思い、Google主催の Webmaster Conference Osaka 2019 に参加してきました。 そのイベントの最初のセッションが Malik Mairaj Syed さんの『SEO Mythbusting』というタイトルのもので、よくあるSEOにまつわる都市伝説的なものに関してGoogle側が回答していくというものでした。 巷で噂される「それって本当にSEO的に効果あるの?」という話が次々とスライドに表示されていき、「イエス」か「ノー」かをMalikさんが回答していくという流れになっていて、まだまだ知識の浅い私にとっては大変勉強になる内容でした。 (SEO業界の人たちからすると当たり前すぎてつまらなかったそうですが…) 今回は、そのセッションの内容をざっくりとまとめていこうと思います。 (Googleからのスライド共有はされないそうなので
まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。 「バージョンアップデートしたらバグった!」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。 デフォルトスタイルが選べるようになった 頻繁に使うブロックスタイルをあらかじめセットできるようになりました。 例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。 デフォルトスタイルをセットしている様子 ブロックの移動にアニメーションがついた ブロックを移動させる時にアニ
WordPress5からの新エディタ、Guternbergでは様々なブロックタイプが用意されており、それぞれの特徴を元に、「ブロックカテゴリー」ごとに振り分けられています。 ブロックカテゴリーとは、下の画像の「一般ブロック」・「フォーマット」・「レイアウト要素」などのことです。 カスタムブロックなどを追加するとき、どのカテゴリーに追加すべきか? というのは地味に悩みどころ...。 まてよ、いっそのこと新しいブロックカテゴリを作ってしまえばいいのでは? と思い、調べてみると結構簡単に追加できたので、備忘録として残しておきます。 いくつかブロックタイプを追加しても「このブロックはカスタマイズによって追加されたものだ」ということが分かりやすくて、結構個人的にはいい感じです。 オリジナルのカテゴリーを追加するPHPコード ブロックカテゴリの登録は functions.php から可能です。 以下の
カスタムタクソノミーのターム一覧リストを表示するには、get_terms()を使うことが多いかと思います。 この時、wp_list_categories()で出力するリストのように、親子階層に合わせてリストタグを入れ子構造で出力するには、一手間加える必要があります。 例えば、親タームの<li>タグの中で、その子タームのリストを.childrenクラス付きの別の<ul>タグとして出力するなどです。 こんな感じのリストを出力したいケース。 <ul> <li> 親タームA <ul class="children"> <li>子タームA-1</li> <li>子タームA-2</li> <li>子タームA-3</li> </li> <li> 親タームB <ul class="children"> <li>子タームB-1</li> <li>子タームB-2</li> </li> </ul> <?php
会員の新規登録フォームを自作する まずは「会員登録」(新規ユーザー登録)してもらうためのフォームを作っていきましょう。 会員登録フォームのHTML部分 <form class="my_form" name="my_signup_form" id="my_signup_form" action="" method="post"> <div> <label for="signup_user_name">ユーザ名</label> <input id="signup_user_name" name="user_name" type="text" required> </div> <div> <label for="signup_password">パスワード</label> <input id="signup_password" name="user_pass" id="user_pass" ty
レスポンシブコーディングをするときに、デスクトップ表示とスマホ表示でテキストの改行位置を変えたい時、みなさんどうしてますか? 私の場合、少し前までPHP側からユーザーエージェントでスマホ分岐させ、brタグの位置を変えたpタグごと記述を出し分けていました... 例えば、IS_MOBILEにスマホかどうかの真偽値が入っているとして、 <?php if (IS_MOBILE): ?> <!-- スマホ --> <p> テキストテキスト<br> テキスト<br> テキストテキスト </p> <?php else: ?> <!-- デスクトップ --> <p> テキストテキスト<br> テキストテキストテキスト </p> <?php endif; ?>
WordPressでは、カテゴリー・タグ・タクソノミーの各タームに関する様々な情報は、「WP_Termオブジェクト」というものに保存されています。 投稿に紐づいたカテゴリなどの情報を扱う時、まずはget_the_category()などを使用してそのカテゴリに関するオブジェクトを取得し、その中からカテゴリ名などの各情報を取得します。 しかし、CSVで投稿を管理する場合など、たまに「タームID」を元にして、カテゴリやタームの様々な情報を取得したい時があります。 今回はそんな時のための備忘録です。 ターム情報をWP_Termオブジェクトまたは配列で取得する カテゴリー・タグ・タクソノミーそれぞれに対し、以下のような関数が用意されています。 get_category() get_tag() get_term() get_category() 使用形式
WordPressで「ホームページの表示」設定で最新の投稿・固定ページを指定した時のトップページの挙動の違いまとめ。 2019 8/31 WordPressの管理メニュー設定項目の中に「ホームページの表示」という設定がありますよね。 サイトのトップページに関する重要な設定ですが、これによってどこがどう変わるのか、皆さんちゃんと把握していますか? (ちなみに「ホームページの表示」設定とは、以下のエリアで設定できる項目のことです。) 「ホームページの表示」設定エリア おそらく、皆さん見かけたことはあると思います。 WordPressでサイトを制作する人なら「ホームページ」に固定ページを指定する時にここで設定することもよくあるでしょう。 ですが、詳しいことはあまり知らないまま放置してるんじゃないでしょうか...? 私もその1人だったのですが、今回はこの「ホームページの表示」設定で 「最新の投稿」
WordPress5から搭載された新エディタ「Guternberg」で採用されている「ブロック」という概念。 正直まだ慣れないことの方が多いですが、使いこなせるとかなーり便利だと思います。 というのも、標準で用意されているブロックだけでなく、好きなフォーマットでブロックを追加することができるんです。 そんな「カスタムブロック」の追加方法について、今回はまとめていこうと思います。 これからは投稿ページだけでなく、ウィジェット機能などもこの「ブロック」に置き換わっていくようですし、今のうちにカスタマイズ方法に慣れておきましょう! 参考になる教材 僕がカスタムブロックの追加方法について学ぶ際にお世話になった教材をまずは紹介しておこうと思います。 まず何より、公式ページです。 Gutenberg Handbook : TutorialsGutenberg Handbook : Block Regi
【JavaScriptの基礎】 変数宣言の方法、var / let / const の違いについて WEBを勉強し始めて早くも1年が経ちました。 一年間WEBサイトの制作に関わってきて、JavaScriptもだいたいわかったつもりでいたのですが、どうやら基本すら全くわかって... JavaScriptにおける「関数」とは 関数は、JavaScript の手続き ― つまり、タスクや値計算を実行する文の集まりです。関数を使うには、呼び出したいスコープ内のどこかでそれを定義する必要があります。 と記述されています。 つまり、計算などの処理を、ひとつにまとめたもののことで、どこかでそのまとまりを定義しておくことで、使いたい場所でそれらを呼び出すことができます。 また、JavaScript の関数に関する完全なリファレンスについての章 を見てみると、 JavaScript において、関数は第一級
WordPressでソースコードの記述がめちゃくちゃ簡単に!新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方 2019 12/30 ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。 クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。 カラーリングは現在「Light」と「Dark」の2種類。 カラーリングの例 カラーリングの例 このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます! シンタックスハイライトの機能自体は「prism.js」を使っています。(より良いカラーリングができるように少しだけ追加処理を加えています。) また、使用できる言語も幅広く、以下の言
WordPressの新エディター、Gutenberg(ブロックエディター)でブロックをカスタマイズする上で、コアブロックの名前を覚えておくと便利です。 また、カスタムブロックを作る際は、既存のブロックカテゴリーに追加することもできるので、カテゴリー名も覚えておきたいところ。 とはいってもいちいち覚えてられないので、一覧にしてまとめておくことにしました。
WordPress5で導入されたブロックエディター(Guternberg)が使いにくいと酷評されていますが、クラシックエディター(TinyMCE)に負けている点があるとすれば、ツールバーのカスタマイズ性能だけだと思うんです。 しかしこれは、まだ新しい機能をどうカスタマイズすればいいのか、情報が出回っていないだけ。 使いこなせさえすれば本当素晴らしいものなので、ブロックエディターを浸透させるべく今回はメモを残しておこうと思います。 ということで、今回はクラシックエディターでの「スタイルセレクト機能」(ドロップダウンメニューのやつ)をブロックエディターで再現してみます。 「再現」と表現してはいますが、完全に上位互換的な新機能に進化したものが簡単に使えるようになっています。 その便利さに感動するのではないでしょうか。 「スタイルセレクト機能」とは そもそものところからなのですが、この「スタイルセ
WordPress5からブロックエディター(Gutenberg)が導入されました。 これに合わせて、WordPressコアに標準搭載されている各ブロックのデフォルトスタイルが記述されたCSSファイルが自動的に読み込まれるようになっているようです。 実際には以下のようなlinkタグが出力されていることが確認できるかと思います。 head内に追加された記述を確認してみる <link rel='stylesheet' id='wp-block-library-css' href='//example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.2' type='text/css' media='all' />
中途半端な位置で改行してほしくない! という場合の対処法。 ポイントとなるCSSは以下の2つ。 word-break: keep-all; line-break: strict; word-breakプロパティについて normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 keep-all 言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。 line-breakについて normal 標準の禁則処理をします。 strict 厳密な禁則処理をします。 ※ strictを指定すると、日本語の「ー」や「っ」でもちゃんと単語の一部として認識されま
mac OS High SierraにVirtualBox+VagrantでCentOS7仮想環境を構築【#1】 ~ インストールから仮想マシンへの接続まで ~ 2019 8/13 「mac OS High Sierra」のホストOSに、 「VirtualBox + Vagrant」で CentOS7のローカル仮想環境を構築してみました。 大まかな流れはドットインストールと同じですが、CentOS7の場合はドットインストールの通りにはいかない部分が多くあり、結構苦戦したので誰かの参考になればと思います。 今回は最初なので、 CentOS7 の仮想マシンを立ち上げ、接続するまでをメモしていきます。そんなに難しい所はないと思いますので、さくっといっちゃいましょう。 はじめに:ベーシックなUnixコマンドについては特に説明しません。簡単なコマンド知識があることを前提とします。
メディアクエリのブレイクポイントにもなる、CSSで使うようなピクセルの単位のことを「CSSピクセル」と言います。(デバイスピクセルと表記されている場合もあります。) メディアクエリで「@media (max-width: 〇〇px)」というような記述をするかと思いますが、この時の「〇〇px」が「CSSピクセル」です。 例えば、iPhone6 の画面解像度は 750px × 1334px(横 × 高さ)ですが、デバイスピクセル比が 2 のRetinaディスプレイなので、WEBサイトなどで表示されているサイズは 375px × 667px です。この 「375px × 667px」の方が「CSSピクセル」です。 説明のため、「画面解像度」や「デバイスピクセル比」という用語も出しましたが、今回のメモではこれらの意味を理解しておく必要は特にありません。 Android端末は少し特殊な解像度の仕組み
次のページ
このページを最初にブックマークしてみませんか?
『WEMO | コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く