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
CSSの進化が止まらない！ Chrome 120で追加された7つの新しいCSSの機能
年末になっても、CSSの進化が止まりません！ 先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数関数、CSSネストの記述方法がより簡単になったり、要チェックです。 New in Chrome 120 Chrome 120 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 120で追加された7つの新しいCSSの機能 カスタムプロパティに対する<image>構文 カスタムプロパティ用の<transform-function>および<transform-list>構文 JavaScriptをサポートしているかチェックできる新しいメディアクエリ :dir
CSS変数（カスタムプロパティ）でコンテキスト依存スタイルが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 01日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 01 日目 CSS 変数こと仕様名カスタムプロパティ custom properties です。 導入当初は割と言及されまくってたように思いますが広く普及した今日こんにちにおいてはなんかもう当たり前に利用されてて言及されない感じすらありますね。 自分も便利に使ってますが、そのひとつの例が UI コンポーネントのサイズ指定です。 デモ：https://codepen.io/ginpei/pen/LYqJajy ここでいうコンテキストは、同じ UI コンポーネントだけど利用場面に応じてちょっと変わるみたいなやつ、のその利用場面のことです。 利用場面に依るプロパティの指定 大小バリエーションを持つボタンを考えます。 HTML 構造はこんなんです。 <button class="Button size--medium">ボタン<
WordPress taxonomy アーカイブの判別方法 - by Takumi Hirashima
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
【React / useHooks】開発不要で使える便利なカスタムフックス20選
フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録されている便利そうなカスタムフックスをピックアップしてみました。 useHooksを使うにあたって カスタムフックスは自前で用意する方がカスタマイズ性高く安心して使える 調べれば同じ機能を持つカスタムフックのコードが出てくるので必ずしもuseHooksを使う必要はない プロトタイプ開発とかで速度が求められるなら導入するのはありかも 最初からこういうのに慣れすぎると開発理解があやふやになるのではといった議論はありそう こういうカスタムフック置くと便利だなという確認にも良さそう 結論
WordPressのプラグイン・ACF Extendedの充実した機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさい！ エンジニアのうーまーです。沖縄からフルリモートでLIGでお仕事しています。 今回は、WordPressのカスタムフィールドプラグインとしてデファクトスタンダードなACFを拡張する、ACFのアドオンプラグインのご紹介です。 ACFはそれだけで神的な存在ですが、たまに「こういう機能もあったらいいなー」と思うこともあります。そういうかゆいところに手が届くようにしてくれるのがこのACF Extendedです。 機能があまりにも多すぎてすべては紹介しきれないのですが、個人的にすごいと思う機能をいくつかピックアップして紹介したいと思います。 ACFとは？その拡張とは？ Advanced Custom Fields (ACF) とは、WordPressの投稿ページや固定ページ、カテゴリ、コメント欄など任意の箇所へ入力欄を追加できるWordPressの追加機能（プラグイン）です。 テキストや画
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
WordPress カスタム投稿タイプで日付別アーカイブページが表示されない時の対処方法 - by Takumi Hirashima
WordPress カスタム投稿タイプで年別や月別の日付別アーカイブページが表示されない時の対処方法を紹介します。 例えば、カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしている時に便利な方法です。 表示するテンプレートが不明な場合にも試していただけると幸いです。 カスタム投稿タイプで日付別アーカイブが表示されない原因 カスタム投稿タイプで年別アーカイブを表示する方法 カスタム投稿タイプで月別アーカイブを表示する方法 カスタム投稿タイプで年別アーカイブが表示されない原因 カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしていると、日付アーカイブページが表示されない場合があります。 原因は、「/%post_id%」指定で記事を作ると、記事URLが「例）example.com/news/1980」となり、日付別アーカイブと投稿ページとの判別できなくなるため、ア
現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS
【WordPress】カスタム投稿タイプのパーマリンクをカスタムするとアーカイブと個別記事が404になる（function.php） | 株式会社エンタースクウェア | Web制作
原因：リライトさせる正規表現と基本URLが間違っていた rewrite_rules_arrayを設定する時に、正規表現とリダイレクトさせる基本URL（パラメーター付きのURL）が間違っていた事が原因でした。 以下が404を解決できたソースです。 add_filter( 'post_type_link', 'my_type_link', 1, 2 ); function my_type_link( $link, $post ){ if ( 'my_post' === $post->post_type ) { // カスタム投稿名/ターム/にする $term = wp_get_post_terms( $post->ID, 'my_category' ); if(!empty($term)){ //タームが指定されている場合 return home_url( '/my_post/' .$term
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられています。既存のWebサイトに導入する事でHTMLに変更を加えることなくスタイルを統一したり管理しやすく再設計する事も出来るのでCSSの最適化に一役買ってくれそうですね。 個人的にもCSS変数を使わない世界はもはや考えられないほど。まだ使った事が無い方はぜひ。 Pollen
CSSでアスペクト比を管理する
Result CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラバラな画像を一定の比率のサイズで統一したものです。歪みが出るので画像そのものには使えませんが分かりやすいサンプルとして。 css:root { --w: 300px; --h: calc(var(--w) / (1.618 / 1)); } img { width: var(--w); height: var(--h); }こちらは黄金比で固定したものになります。横幅を決めて変数に代入するとcalc()関数で比率に沿った高さに計算されます。後は幅と高さの変数を比率を保ちたい要素に適応すれば任意のアスペクト比を保つ事が出来ます。 例えば横幅400pxで4:3比率固定にしたいなら :root { --w: 400px; --h: calc(var(--w) / (4 / 3)); }とすればいい。 CS
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。 CSS Variables 101 by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数（カスタムプロパティ）とは 変数名の付け方 CSSの変数のスコープ CSSの変数のフォールバック CSSの変数の効果的な使用例 インラインでCSSの変数を定義 メディアクエリでCSSの変数を定義 CSSの変数の継承 CSSの変数のバリデーションの仕組み CSSの変数の興味深い発見 デベロッパーツールで使用できる便利なテクニック 終わりに はじめに CSSの変数（別名: カスタムプロパティ）がブ
イージングをCSS関数で管理する
Result 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で管理しましょう、という内容です。 普段さほど使わないので思いつきませんでしたが皆さん既に取り入れてそうですね。 css:root { --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier(.95, .05, .795, .035); --ease-in-circ: cubic-bezier(.
ウェブページに簡単にカスタムCSSを適用できる拡張機能「Amino」
CSSはウェブページにおいてレイアウトやスタイルを決めるための言語ですが、「Amino」はそのCSSを簡単に書き加えることができ、サイトを自由にカスタマイズできるというChromeの拡張機能です。 Amino: Live CSS Editor for Chrome https://aminoeditor.com/ Amino: Live CSS Editor - Chrome ウェブストア https://chrome.google.com/webstore/detail/amino-live-css-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf Chromeウェブストアのページを開き、右の「Chromeに追加」ボタンをクリックします。 アクセスするウェブサイトへの権限を求められます。確認して「拡張機能を追加」をクリック。これでインストールは完了です。 C
Simple translation tools.<!--{jp} 簡単な翻訳ツール--><!-- none简单的翻译工具--><!--{cn} 简单的翻译工具-->
This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB) Install As Modules $ npm install translater.js Client-side usage <div> 这里是中文 <!--{jp}ここは日本語です--> <!--{en}Here is English--> </div> <script src="../dist/translater.min.js" type="text/javascript"></script> <script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WP REST APIで独自エンドポイントにパラメーターを使ってキーワード検索や個別記事を取得できるようにする | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
あなたがまだ知らないReactのテクニック10選 - Qiita
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
