WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。figure,img,エラー,グーテンベルグ,ハマったコアな部分には詳しくないので何とも原因がよく分からないんですが、CTA用の簡単なブロック追加をしている時に少しハマった話です。問題となったのが、JSXで書いてある次の2種類のコードです。/>両方同じようにimgを使って同じプロパティを使用し、それぞれのプロパティに同じ値を与えているのですが、これを保存してページをリフレッシュすると、前者で問題が発生するというものです。別の環境で試したら上記の後者でも同様にフィルターされてしまいましたので、結局CTAはイメージブロックを採用してInnerBlocksを使用することに。Image用のコンポーネントではなく、自分でimgを使ったコンポーネントを作成する時に起こったものです。問題となったのは、ブロックを保存するメソッド「save」内での現象で、ワードプレスのフィルターフックによるものだと思われるのですが、「figure」タグが保存する値に自動挿入されてしまいますので、AJAXによる非同期保存を行なっている段階ではブロックのエラーが確認できないのですが、ページをリフレッシュするとフィルターを加えて保存された値を元に再生されますから、そこでブロックで予想される値と異なるということで、エラーが生じてしまうんです。原因が分からなくて以前に作成したチャットブロックを見直してみると、属性「src」と属性「alt」の書く順番がCTA用のブロックとは異なっていたので、エラーの起こっていないチャットブロックに合わせて(冒頭の例の後者のように)順番を変更するとエラーが起こらなくなりました。ちなみにfigureタグを自分で入れたら重複させられました。納得はいっていませんので、また時間がある時にでも調べます。コアのコードを見たわけじゃありませんが、保存する時にフィルターを掛けてタグを自動挿入されているので、クラシックエディタ用のフィルターが働いてしまっているのかもしれません。クラス「wp-block-image」とかの特定のラッパーで囲っていないと自動的にフィルターがかかるのかもしれませんが、後者のような順でプロパティを書いたら大丈夫でしたしね。探したら例外適用するコードとかあったのかもしれませんし、知っている方がいらっしゃったら教えて欲しいです。いえば、RawHTMLはまだ試していませんでした。ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法Nora著者WPワークスの管理人です。リポジトリにも数件アップロードしています。Export」の使い方コラム2019/06/01もうすぐテーマ「Ace」のレビューが始まります。Holder」が承認されました。Holder」をアップロードカスタマイズ2019/05/12独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点コラム2019/05/12Gutenbergのバグですかねコラム2019/05/12テーマをプラグインとに切り離しました。次のページカスタムブロックのAttributesにはobjectタイプが存在しないらしい。コメントデータの処理方法の詳細はこちらをご覧ください。新着記事2019/05/24JavaScriptでウィジェットエリアHTMLを取得するにはワードプレスをヘッドレスで使用することを想定すると、フロントエンド側で困るのはウィジェットな気がします。以前、アップデートチェッカーを作成する方法を書いたことがあるのですが、そういえばZIPファイルについて書いていなかったのでちょっと追記するような形で書いておきます。以前Gutenbergのカスタムブロックの追加方法を紹介しましたが、今回は具体例と一緒に解説です。先に解説に役立つ知識として以下の記事を書いていますので、その紹介をしておきます。ワード2019/04/17メインクエリでループするブログページなどをエディタで編集可能にするには?ブログページなどをエディタで編集可能にするのは、ちょっと面倒なカスタマイズかもしれません。ワードプレスにはフロントエンドの基本的なページの種類として以下のような形になっています。jQueryテーマで簡単に設定できるようにテキストのエフェクトを追加できるようにしようと、試しでとりあえずこんな感じのエフェクトを1つ作成しましたので、備忘録として文字毎にエフェクトを与える方法を書いておきます。2019/04/08jQuery不要の便利なスライダー「Swiper」の使い方テーマ「Ace」で採用しているスライダーライブラリについての紹介です。この例はテーマ「Ace」でのスライダー機能で作成したデモですが、このようにネスト化して複数のエ2019/04/05ナビメニューに編集項目を追加する方法ちょっとだけ厄介なカスタマイズについてです。ナビメニューの設定項目を自由に編集したいと思った方もいるでしょう。Plus」などを使っている人が多くいらっしゃると思いますが、目次って実は結構簡単に作成出来ちゃいます。Icons(MDI)」を例に挙げて、使い方をさらっと紹介いたします。Export」の使い方ワードプレスの記事を含むデータをCSV/XMLでエクスポートする無料のプラグインツールの使用方法についてです。エクスポートするプラグインの数は、リポジトリから探してみると案外少ないので、個人的2019/05/24JavaScriptでウィジェットエリアHTMLを取得するにはワードプレスをヘッドレスで使用することを想定すると、フロントエンド側で困るのはウィジェットな気がします。以前、アップデートチェッカーを作成する方法を書いたことがあるのですが、そういえばZIPファイルについて書いていなかったのでちょっと追記するような形で書いておきます。以前Gutenbergのカスタムブロックの追加方法を紹介しましたが、今回は具体例と一緒に解説です。先に解説に役立つ知識として以下の記事を書いていますので、その紹介をしておきます。Apps」AMPもSSLもそうですが、簡易的なPWAもリポジトリからインストールできるプラグインで対応させてしまうことができます。WorkerというJavaScriptのAPIを使用するWPワークスダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。Ace検索ホーム上ウィジェット。