「開発関連」カテゴリーアーカイブ

tab退避ーStorybook polished styled-components

Storybook

プロダクト間共通の React コンポーネントライブラリを運用する話 – SmartHR Tech Blog

Storybook for React
https://storybook.js.org/docs/guides/guide-react/

Writing Stories
https://storybook.js.org/docs/basics/writing-stories/

StoryBook(React)最初の1歩 – Qiita
https://qiita.com/sugasaki/items/66d260f9602921196b07

polished

Sass(SCSS)の関数をstyled-componentsでも使いたい
https://diff001a.netlify.com/sass-styled-components/

polished | Documentation
https://polished.js.org/docs/#rgba

styled-components

styled-componentsを使ったCSS設計 – Qiita
https://qiita.com/taneba/items/4547830b461d11a69a20#%E5%AE%9A%E6%95%B0%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B

Reactでstyled-componentを使ってベースとなるstyleを当てる方法 – Qiita
https://qiita.com/102Design/items/e9f3ede130999d3a1061
テーマや共通cssを使いたかったけどよくわからんかった。

次の記事で書いているようにThemeProviderを読み込む必要があった。

How to use Themes in styled-components – DEV Community 👩‍💻👨‍💻
https://dev.to/aromanarguello/how-to-use-themes-in-styled-components-49h

これでリセットcssと共通のベースcssが読み込めた。

さよならSearchEverything

ACFの検索結果にSearchEverythingを長年使ってたけどそろそろ3年メンテされていない&検索文章や結果に半角スペースあるとバグるので乗り換えてみる。

そのまんま。乗り換えてみました。

参考URL

カスタムフィールドも検索対象にできるプラグイン「Relevanssi」

カスタムフィールドも検索対象にできるプラグイン「Relevanssi」

Indexing only some visible custom fields | Relevanssi

Indexing only some visible custom fields

Relevanssi and Polylang | Relevanssi

Relevanssi and Polylang

Manual search results filtering | Relevanssi

Manual search results filtering

基本は

設定画面からカスタムフィールドを含むように指定

設定画面から抜粋文の作成とハイライトを指定

抜粋文や結果に出したくないACFの種類をフィルターを使って除外

手動でインデックスさせる

でdone。
ハイライトも抜粋文もばっちり。重くならないか心配だけどしばらく使ってみる。

Bogoで記事を複製・更新するとスラッグに-2がつくトラブルを回避

どこにも情報無いなーと思ったら、ドンピシャでこれっぽいのでメモしておく。

結論:新エディタ(Gutenberg・グーテンベルグ)との処理のバッティングのよう

編集するとスラッグが変わってしまう | WordPress.org https://wordpress.org/support/topic/%e7%b7%a8%e9%9b%86%e3%81%99%e3%82%8b%e3%81%a8%e3%82%b9%e3%83%a9%e3%83%83%e3%82%b0%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%97%e3%81%be%e3%81%99/

情報ありがたい〜。というわけで

対策としては2つ

  • functions.phpに処理を追記して一時的に回避
  • クラシックエディタ(WP公式プラグイン)を有効にする

のどちらかかな。いったん。

方法1)functions.phpに処理を追記して一時的に回避

functions.phpに下記を追加

function slug_filter_function( $override_slug, $slug, $post_ID, $post_status, $post_type, $post_parent ){
    $override_slug = $slug;
    return $override_slug;
}
add_filter( 'pre_wp_unique_post_slug', 'slug_filter_function', 10, 6 );

リンクだけだと情報がなくなっていくこんな世の中なので抜粋。
ありがたい・・・。

方法2)クラシックエディタ(WP公式プラグイン)を有効にする

クラシックエディタを有効化すると回避できた模様

エディタのせいならクラシックエディタ使えばその処理通らないのでは?と思ってクラシックエディタDLして有効化。
するとどうやら回避できた模様です。
今回のコンテンツはほとんどACFだし、グーテンベルグ移行するひとが多くなると、
このままクラシックエディタの寿命は延びないだろうし、いざとなればすぐ戻せるし、
一旦上記はコメントアウトして様子を見ることにしました。
クラシックエディタよ、永遠にそばにいて・・・(どうなることやら)。

他にクイック編集だとスラッグが変えられるという情報もあって、最初はそれで頑張ってたけど手間がすごい・・・。

Bogoで別言語記事を更新するとスラッグに-2がつくトラブルを回避

どこにも情報無いなーと思ったら、ドンピシャでこれっぽいのでメモしておく。

新エディタとの処理のバッティングのよう

編集するとスラッグが変わってしまう | WordPress.org https://wordpress.org/support/topic/%e7%b7%a8%e9%9b%86%e3%81%99%e3%82%8b%e3%81%a8%e3%82%b9%e3%83%a9%e3%83%83%e3%82%b0%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%97%e3%81%be%e3%81%99/

というわけで

WP5系で発生する bogo + 新エディタでのスラッグに-2がつくトラブル回避にはfunctions.phpに下記を追加。

function slug_filter_function( $override_slug, $slug, $post_ID, $post_status, $post_type, $post_parent ){
    $override_slug = $slug;
    return $override_slug;
}

add_filter( ‘pre_wp_unique_post_slug’, ‘slug_filter_function’, 10, 6 );

リンクだけだと情報がなくなっていくこんな世の中なので抜粋。

もしくはクラシックエディタを使う

クラシックエディタだと不要そうなので一旦上記はコメントアウト

他にクイック編集だとスラッグが変えられるという情報もあって、最初はそれで頑張ってたけど手間がすごい・・・。

【tweenMax→gsap】tweenMaxの名前変わってた件。。

久々につかおうとしてgsap3にしたらtweenMaxの呼び出しがうまく行かんかったのでメモ。

tweenMax→gsapへ変更されました

yes, gsap is the replacement for TweenMax.

GSAP 3 css – GSAP – GreenSock
https://greensock.com/forums/topic/21864-gsap-3-css/

インストールについてはこちらから

GreenSock | Docs | Installation
https://greensock.com/docs/v3/Installation

利用例(プラグインScrollToPluginの場合)

ScrollToPlugin – Plugins – GreenSock
https://greensock.com/scrolltoplugin/

ScrollToPlugin: Scroll to Element
https://codepen.io/GreenSock/pen/LkOrKY

さくらの「バックアップ&ステージング機能」 はカカフカカ。うちのWordPressがくっそ重いのでPHP設定を変更してみた

ブログの表示速度が遅くてええかげん我慢の限界なのと、やっとこ時間が出来たのでPHPのバージョンを上げてみた。
ついでにWPプラグインの更新も一切合切してみた。
バグると怖いので、

以前案件で使おうとしてやめたさくらの「バックアップ&ステージング機能」を試しに使ってみた

以前の記事

さくらの バックアップ&ステージング機能使おうとしてやめた


続きを読む さくらの「バックアップ&ステージング機能」 はカカフカカ。うちのWordPressがくっそ重いのでPHP設定を変更してみた