WordPressで投稿が存在する年の一覧を取得する | Yoshinoki's Blog
はじめに WordPressを使っていて、「投稿が存在する年のデータのみを一覧で取得したい」という場面は意外と多いと思います。 （アーカイブページで年ごとに投稿を表示したい、年のデータを使った絞り込みUIを作成したい、など） しかし、WordPressには投稿年の一覧データのみ取得するための関数が用意されていません。 wp_get_archives()を使えばアーカイブリンクを取得できますが、この関数はHTMLしか返さないため、年の一覧を取得して何かしらの処理を行う場合は適していません。 ここでは、投稿が存在する年の一覧を取得する方法を2つ紹介します。 方法1：WP_Queryを使う WP_Queryを使って投稿を取得。愚直にループで年の一覧を取得します。 $args = [ 'post_type' => 'post', 'orderby' => 'date', 'posts_per_pa
Reactでブラウザの横幅を取得する - Qiita
はじめに タブレットやPCなどで表示を切り替える場合、横幅を取得する必要がある。Reactで横幅を取得する方法を記載します。 成果物 開発 import React, { useState, useEffect } from 'react'; const useWindowWidth = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); };
JavaScriptでCSSのカスタムプロパティを扱ってみる | TipLib（ティップリブ）
// ヘッダーの高さを取得する const headerElement = document.getElementById("header"); const headerHeight = headerElement?.offsetHeight ?? 0; // ヘッダーの高さをカスタムプロパティにセットする document.documentElement.style.setProperty("--headerHeight", `${headerHeight}px`); #headerが存在しない場合にoffsetHeightがエラーになるので、オプショナルチェーン（?.）で繋ぎます。 その時にheaderElementがundefinedになるので、Null合体演算子（??）で0を代入します。 特定の要素にカスタムプロパティを設定する
Get the screen width & height without JavaScript
Get the screen width and height as pixel values using a few lines of CSS. Powered by @property & trigonometric functions Unitless values so you can easily use them inside any formula Updates on screen resize (No need for JavaScript) @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; } :root { --w:
WordPress: アイキャッチ画像URLの取得は get_the_post_thumbnail_url | WWWクリエイターズ
WordPressで、投稿のアイキャッチ画像のURL（文字列）を一発で取得する関数「get_the_post_thumbnail_url」が、Wordpress version4.4 でついにリリースされました！（２０１７年１２月） やった〜。逆になんでいままでなかったのでしょうか。 胸のつかえが取れた気分です。 アイキャッチ画像のURLを出力する関数 まずは関数です。ズバリ：the_post_thumbnail_url() // アイキャッチ画像のURL文字列を出力する the_post_thumbnail_url( 'medium' ); サイズは、’thumbnail’, ‘medium’, ‘large’, ‘full’, の中から好きにしてください。 引数で投稿IDを渡せないのは、不便ですが、the_xxxxの、theで始まる関数は、メインループ内での利用を意図されているというこ
[React Router] URLクエリストリングを取得する
React Router(v5)を使っていて、http://localhost:3000/books?hoge=1111&fuga=aiueoというようなURLのクエリストリング?hoge=1&fuga=aiueoを取得する方法をいくつか試してみました。なお、TypeScriptで実装しています。 自力で取得する searchには?hoge=1111&fuga=aiueoというような文字列がセットされています。この文字列を操作して無理やり取得してみました。何かものすごく制約がない限り、これは採用しないと思います。 import React from 'react'; import { useLocation } from 'react-router-dom'; interface QueryString { [key: string]: string; } const Books: Rea
![[React Router] URLクエリストリングを取得する](https://cdn-ak-scissors.b.st-hatena.com/image/square/bafed6bc63654302211967641a742ada89013840/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--tc6ZDmcZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520Router%25255D%252520URL%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252583%2525AA%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%252592%2525E5%25258F%252596%2525E5%2525BE%252597%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aurawa72%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2c1VEpfbHBhTExxQlZQT2luTmo4OXEwTV83WndVNXNGNGlpa3RsTVE9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
WP REST APIに追加したエンドポイントへのクエリを設定する覚書 | WP-kyoto
WP REST APIでエンドポイントを追加した場合、受け付けるクエリに関する設定も行えます。 ドキュメントに乗っている例 �https://v2.wp-api.org/extending/adding/ <?ph […] ドキュメントに乗っている例 �https://v2.wp-api.org/extending/adding/ <?php add_action( 'rest_api_init', function () { register_rest_route( 'myplugin/v1', '/author/(?P\d+)', array( 'methods' => 'GET', 'callback' => 'my_awesome_func', 'args' => array( 'id' => array( 'validate_callback' => function($para
【JavaScript】Cookieをsplit()で配列にするとCookie名で値の取得ができなくなる
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでCookieをsplitで配列に分割すると、Cookie名を指定しても値が取得できないケースがあったので、事例と対処法をご紹介しています。 では、解説してきます。 原因は半角スペース Cookieは仕様上一つのテキストデータとしてブラウザ側に保存されています。具体的には下記のように保存されます。 testUser1={"name":"testUser1"}; testUser2={"name":"testUser1"}; testUser3={"name":"testUser1"} 上記のCookieを取り扱いやすくする方法として、split()を使用して配列化する方法があります。Cookieの配列化は基本的に下記の流れで行います。 ⓵document.cookieでCookieを取得する⓶取得したC
【JS】Objectをループ処理はObject.entries()が便利
Object.entries()を使用すると簡潔に書けますObject.entries()を使用してObjectのループを書けます。 実際に書いてみましょう！ const testObj = { "key01": "AAA", "key02": "BBB" } for ([key, value] in Object.entries(testObj)) { console.log(`${key}: ${value}`); } # or Object.entries(testObj).forEach(([key, value], index) => { console.log(`${key}: ${value}`); })こんな感じで書けます！ key&valueをそのままforループ内で使用できるので、便利ですね。 ※Internet Explorerでは動作しないので、注意が必要！ 他の方
WP REST APIでクエリパラメーターを操作してWordPressの投稿データをリストで取得する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
過去記事「WP REST…
WP REST APIのカスタムエンドポイントにカテゴリー名を追加した話
私にもありました。Wordpressでの一覧呼び出しはJs+RestAPIが正義だと思っていた時代が。。。 皆さんはWP REST APIを使用したことがありますか？ json形式で投稿を扱えるのですごく便利なのですが、「この情報が含まれていないからエンドポイントに追加したい」ということが割りと起こります。 特にカテゴリーはidしか含まれていないので、取得後、さらにカテゴリー名を取得しに行くという2度手間が発生します。 そこで今回はWP REST APIのエンドポイントにカテゴリー名やカテゴリーに付随する情報を追加してみましょう。 # この記事で解決すること WP REST APIのエンドポイント（post_type）にカテゴリー名を挿入することができる WP REST APIのエンドポイント（post_type）にカテゴリーに付随する情報を挿入することができる 前提 今回はカテゴリーのn
composedPath()で一気に遡る（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 11日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 11 日目 今日は event.composedPath() です。jQuery の parents() を思い出します。 Event.composedPath() – Web APIs | MDN デモ：https://codepen.io/ginpei/pen/ExwgeNd 基本的な使い方 イベントが発火した要素 event.target から順に要素のパス？の根本までの要素オブジェクトを配列で返します。 el.addEventListener('click', (event) => { console.log(event.composedPath()); // => [button, span#elButton, p, header, article, body, html, document, Windo
「画像の一括ダウンロード」「ページ情報の抽出」などの操作をプログラミング不要で自動化できる「Browserflow」レビュー
インターネットを利用していると「Googleマップの検索結果をスプレッドシートにまとめる」「Twitterのフォローを全て解除する」といった手動でポチポチ作業するのは面倒な作業が必要になることがあります。Google Chrome向け拡張機能「Browserflow」を使えばブラウザ上の面倒な作業をプログラミングの知識がなくとも簡単に自動化できるとのことなので、実際にBrowserflowを使って使い勝手や自動化の方法を確認してみました。 Browserflow - Automate your work on any website https://browserflow.app/ Browserflowの公式サイトにアクセスすると、拡張機能配布ページへリンクする「Add to Chrome」と記されたボタンが用意されているのでクリックします。 配布ページに移動したら「Chromeに追加」
querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記
表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある． NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ． Array.prototype.slice.callする オーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い． Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href) [].slice.callする Array.prototypeのかわりに[]で書く．ちょっと短い
URLクラスを使って、クエリストリングを簡単に扱う | バシャログ。
みなさん。こんにちは。 久しぶりの投稿となります。 今回はとある案件でURLにクエリストリングを付与したり削除したりという機能を開発していた時、URLのクエリ部分をオブジェクトにしたり、そのオブジェクトをクエリストリングに戻したりという処理がすごく面倒だったので、 クエリストリングの操作が楽になるライブラリを探していた所、JavaScript(ES6以降)標準で入っているURLクラスで簡単にいったので記事にしてみました。 今回は、チェックボックスにチェックがついたらnewKeyというパラメーターがURLに追加されるようにしようと思います。 デモ 画面収録 2021-04-14 16.56.24.mov HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>URLSearchParamsを使ってみ
Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法
Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、Intersection Observerが非常に簡単で便利です。 Intersection Observerを使用して、Vue.jsでスクロールイベントをトリガーする方法を紹介します。 How To Trigger a Scroll Event in Vue.js With the IntersectionObserver by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Intersection Observer APIで何ができるか IntersectionObserverのコンポーネント 終わり
すべてのアプリから色を取得できる！シンプルで使いやすく、高性能なUIデザイン用の無料カラーピッカー -Pika
ブラウザに表示されたWebページはもちろん、Photoshop, Illustratorをはじめとするすべてのアプリからカラーをすくうことができる、シンプルで使いやすい高性能なカラーピッカーを紹介します。 macOS対応のアプリで、オープンソースなので商用でも無料で利用できます。 カラー値は、HEX、RGB、HSB、HSLに対応。 ネイティブで非常に高速 macOS 10.15 Catalina以降対応のアプリです。 アクセシビリティ重視 カラーを比較して、WCAGへの準拠をすばやく確認できます。 コンパクト メニューバーに対応、必要のないときに邪魔になりません。 ログイン時に起動 設定からログイン時に起動を選択、いつでもクリックまたはショートカットでアクセスできます。 アクセスが簡単 設定からグローバルホットキーを設定できます（⇧⌘Dがお勧め）。 カラーのフォーマット HEX、RGB、H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH![[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH](https://cdn-ak-scissors.b.st-hatena.com/image/square/4911df4201ee2be31aa9ff13e682cf08f8ad84df/height=288;version=1;width=512/https%3A%2F%2Futubou-tech.com%2Fwp-content%2Fuploads%2F2023%2F05%2Fcookie_react000png.png)
WP REST APIで独自エンドポイントにパラメーターを使ってキーワード検索や個別記事を取得できるようにする | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
Google Domains | Official Site – Google Domains