プログラミング

【WordPress】特定の親カテゴリーに所属する子カテゴリー一覧を親も含めて表示する

概要固定ページなどでカテゴリー一覧を表示する場合、全てのカテゴリーであればwp_list_categories()を使うだけで表示される。しかし、特定のカテゴリーとその子カテゴリーだけを表示したい場合、WordPressで用意されている関数では実現できないようなので、ショートコードを使って実装してみた。手順 functions.phpにショートコードの定義を追加 function getCa...

2020.12.07

WordPress

ロリポップのサーバで403エラーが出てしまう場合の解決法

概要ロリポップのサーバにはWAFというセキュリティ設定があり、有効にしていると一部のWordPressプラグインが正常に動作しないことがある。「いいね」ボタンを簡単に設置することができる「WP ULike」プラグインの場合、設定画面で「Save」ボタンをクリックするとアラートにJavaScriptのソースが表示されてしまう。原因 WAFの制限により、wp-admin/admin-ajax.p...

2020.11.23

WordPressサーバ

CSS

[new.css] HTMLだけで使うことができるCSSフレームワーク

概要 Bootstrap, Material-UI, VuetifyなどのCSSフレームワークは、独自のクラスをタグのクラス属性に割り当てなければならない。 new.cssを使うと、HTMLタグを記述するだけでモダンなウェブサイトを作成することができる。細かいデザインを実現することは難しいが、簡単なサイトであればキレイにまとめることができる。使い方 <head></head>内に以下の2行を追加...

2020.10.19

CSS

ダークモードの場合にCSSを切り替える(prefers-color-scheme)

CSSのメディアクエリで、@media (prefers-color-scheme: dark) {// スタイル定義}とすると、ユーザーのOS設定がダークモードの場合のスタイルを定義することができる。 // ダークモードの場合 @media (prefers-color-scheme: dark) { body { background-color: #000; color: #fff; } }...

2020.10.15

CSS

Reactで「Form submission canceled because the form is not connected」となる原因

現象フォームのonSubmitイベントハンドラにて、react-router-domを使ってhistory.push('xxx')のように画面遷移を行うと、コンソールにForm submission canceled because the form is not connectedというエラーが表示される。 import React, {FC, FormEvent} from 'react'...

2020.10.02

React

【JavaScript】ドラッグアンドドロップAPIの使い方と動作しない時の原因

Drag & Drop APIとは Drag & Drop APIは要素をドラッグアンドドロップすることができるHTML5のAPIであり、ほぼ全てのブラウザで動作する。（※スマートフォンでは動作しない） Drag & Drop APIの使い方ドラッグドラッグしたい要素にdraggable="true"を付ける。 <p id="draggable" draggable="true" style=...

2020.09.10

JavaScript

JavaScript(ES2015, ES6)でオブジェクトをコピーする方法

概要 ES2015から導入された分割代入を使うと、オブジェクトのコピーを簡単に記述することができる。 const obj = {name: 'hoge', age: 20}; const newObj = { …obj }; ES5の場合 Object.assign()を使う。 var obj = {name: 'hoge', age: 20}; var newObj = Object.assig...

2020.09.03

JavaScript

【JavaScript】任意の位置へスクロールさせる方法

概要 JavaScriptで任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。要素.scrollIntoView() window.scrollTo...

2020.08.27

JavaScript

CSS

【CSS】nth-of-type(n)はクラスに指定しても効かない？

概要よく勘違いしてしまうのだが、CSSの擬似クラスnth-of-type(n)はクラスに指定した場合でもnの対象としてカウントされるのは要素(タグ)である。サンプル <ul> <li class="hoge">11111</li> <li>22222</li> <li class="hoge">33333</li> <li class="hoge">44444</li> <li class="...

2020.08.20

CSS

【WordPress】続きを読む(moreタグ)が効かない・機能しない原因

概要 WordPressのエディタには「続きを読む」というものがある。ブロックエディタでは「レイアウト要素」の中にあり、記事の続きやネタバレしてしまうような内容を隠すために使われる。「続きを読む」をクリックすると以下のようになる。しかし、これは対応しているテーマでしか機能しない。公式テーマのTwenty NineteenやTwenty Twentyであれば正常に動作するが、第3者が作成したテー...

2020.08.13

WordPress