SiteOrigin」が凄過ぎて、エディターを作るモチベーションが下がった。WPワークスホームブログワードプレスのカスタマイズ情報などを紹介しています。チュートリアルカスタマイズワードプレスのセットアップ方法ワードプレス初心者向けです。ドメインの取得とセットアップ必要なサーバー環境のセットアップワードプレスのインストール手順ワードプレスで最初に行うべき設定おすすめのプラグインテーマ「Ace」の特徴当サイトでも使用している自作テーマです。専用プラグイン「Ace+」カスタム投稿タイプページ編集に役立つコンテンツを管理します。CTAを作成してストックできます。表示位置は投稿ページや固定ページにて設定可。ブロックエディタを使って任意のスライダーを作成可能です。作成したスライダーはコンテンツやウィジェットで使用できます。所謂テンプレートです。ウィジェットでも引用する事ができますので、これらの組み合わせによりページの編集が自由自在に。カスタムウィジェットプラグイン「Ace+」に付随するオリジナルウィジェットです。投稿一覧を任意の場所に配置します。投稿ページにて投稿者の紹介をします。キーワード入力するだけでマップを表示します。ページの見出しを拾って目次を生成します。クリックすると見出しの位置までスクロール。SNSシェアアイコンを設置します。マウスでホバーさせるとアイコンがちょっと浮きます。作成したスライダーを表示します。ブロックエディタで簡単に編集できます。あらゆる投稿タイプのコンテンツをウィジェットエリアに出力します。これでフッターも自由にカスタマイズ編集可。カスタムブロックプラグイン「Ace+」により有効化されるオリジナルブロックです。カスタムナビメニューサムネイル付きのスライドメニューなど、オプションが用意されています。カスタムフォント「Googleフォント」+「フォントファイルのアップロード」カスタムCSSCSSファイルを追加できます。SiteOrigin」が凄過ぎて、エディターを作るモチベーションが下がった。SiteOrigin」が凄過ぎて、エディターを作るモチベーションが下がった。SiteOrig」の機能が凄すぎて一気に作る意欲が失せました。ええ、今まで使ったことがなかったんですよ。これ以上に便利な無料のエディターは、少なくとも僕には超えられないと思い知らされました。最近有料テーマ「AVADA」が凄いなぁなんて思っていたんですが、有料のあのテーマを見た後だと、このプラグインを無料で提供するSIteOriginは異常に見えてしまいます。いうわけで、今更レビューするのも変なのですが、ちょっと使い方をまとめるついでに、他にプラグインなどを使用していないのであれば、意地を張らずインストールしてしまうことを推奨します。Extensions」との相性は非常に悪いので、早くワードプレスのコードを使い慣れて、JavaScriptもちゃんと扱えるようになるまでは非推奨です。記事の最後にどういう事が起こるかを一応書いておきます。僕みたいにHTMLエディターでタグも全てを手打ちしている人にとっては、あまり変化がないように思われるかもしれません。SiteOrigin」の味噌はウィジェットを使って、コンテンツを部分的に管理することが出来ることです。Row」で行をカラム数を指定して追加することが可能です。その中にドラッグ可能なウィジェットアイテムを配置し、ウィジェット毎に設定項目をポップアップさせ、通常のエディターとして機能するウィジェットアイテムも用意されていますので、コンテンツ作成において、不都合を感じる点が一切ありません。記事を書く際はテキストを打つんですが、それ以外の処理がマウス操作のみでほぼ完結してしまいますので、僕が今までHTMLを手打ちしていたのが馬鹿みたいに思えてしまうほど楽です。ええ、僕はビジュアルエディターどころか、今までHTMLエディターでクイックタグを殆ど使ったことがないんですよ。今思えばアホなんですが、テーマ「ShapeShifter」に生成されるコンテンツ部分のCSSをエディタースタイルとしても使用することが出来るようになってから漸くビジュアルエディターを使い始めたくらいで、今まで時代遅れだったエディターが急進化したせいで驚きまくっています。全てのウィジェットテキスト形式のウィジェットもそうなのですが、コンテンツに挿入するに当たって、ラッパークラスを与えたり、背景や余白を設定したり、などなど、アイテムごとに設定するようなおまけ付きで、登録されている全てのウィジェットに加え、オリジナルのウィジェットも複数用意されています。これが部分毎の管理に非常に便利な方法です。コンテンツを関数で生成してしまう結果になるようなウィジェットは躊躇ってしまいますが、正直管理しやすいので羨ましかったです。SiteOrigin」のエディターウィジェットでも、画面いっぱいに表示されますので、集中しやすく便利な編集画面なんですが、このプラグインではテーマカスタマイザーのようにライブプレビューしながらコンテンツを作成できてしまいます。Builder」と聞くと連想する典型的な編集画面に切り替わり、ドラッグ&ドロップしながら出来栄えをチェックしながらコンテンツ作成できるようになります。個人的にはこれはあまり好きじゃないんですが、今までそういうツールを使ってウェブページを作成してきた人にとっては非常に使いやすい機能なんじゃないでしょうか?イメージは「Pixabay」から直接ダウンロード可能もはやこれ単体で一つのプラグインになりそうな機能ですが、何気なく凄いものを隠し持っているんです。ええ、画像が無ければ編集画面で「Pixabay」を検索できるんです。僕が普段使っている手間暇をカットしてくれる優れもので、この機能単体でも欲しいと思いました。いう便利な機能が本当に多く、全てを確認したわけではないんですが、使ってみる価値は十分にあると思います。本気で作ろうか考えてしまいます。その前に他にそれ用のプラグインがあるか探してみます。テーマ「ShapeShifter」との相性は最悪に近い将来的には扱えるようにしたいんですが、それには難題が山積みな気がします。少なくともテーマの現行のバージョン1.0.34、プラグイン1.0.12と一緒には使う気になれませんでした。起こり得る問題が非常に多いんですよ。Extensions」との相性が酷いんです。確認しただけでもこれだけあります。コンテンツ内にウィジェットの条件出力項目が追加されたフォームが用意され、保存時にエラーの原因となる。SiteOrigin」のオリジナルウィジェットも追加されるが、そのウィジェットフォームが呼び出されることにより、後続のHTMLが全て出力されなくなる。SiteOrigin」自身のエディターも出力されなくなる。「メタボックスとして出力して、エディターに重ねられるんだ」という驚きもあって、僕としては勉強になったんですが、上手く機能しないのはちょっと悔しいです。詳細な部分は未確認ですが、テーマ「ShapeShifter」自体とは大丈夫だと思うんで、サイドバーを含めたコンテンツエリアのカラム数変化が出来ることから、最大幅をウィンドウサイズに切り替えるようにし、ショートコードなどでコンテンツ作成を手助けすれば、めちゃ合わせて使いたくなるプラグインなんですよ。SiteOrigin」以上のものは作れそうにないのがちょっと悔しいですね。勉強になるコードが多いので、勉強用にテスト環境では使っていこうと思っています。最近までBackboneやUnderscoreといった便利な存在も知らなかったくらいで、もっと勉強せんといかんと思いました。ええ、色々他のコードも見るようにして、つい最近はenchant.jsが個人的に面白そうに思いました。いつか使ってみたいもんです。Extensions」に追加していきます。SiteOriginNora著者WPワークスの管理人です。リポジトリにも数件アップロードしています。Export」の使い方コラム2019/06/01もうすぐテーマ「Ace」のレビューが始まります。Holder」が承認されました。Holder」をアップロードカスタマイズ2019/05/12独自のアップデートチェッカーを作成する際、更新用のZIPファイルにおける注意点コラム2019/05/12Gutenbergのバグですかねコラム2019/05/12テーマをプラグインとに切り離しました。コメントデータの処理方法の詳細はこちらをご覧ください。新着記事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検索ホーム上ウィジェット。