WordPress エディターである Gutenberg にはどのような価値があるのでしょうか?

こんにちは 🙂、私の記事をクリックしていただきありがとうございます 😁。

今日は初めて、Web 開発の世界で非常に物議を醸しているテーマ、Wordpress についてお話します。

嘲笑されることの多い WordPress は、Web やブログとともに成長してきたため、依然として不可欠なものです。 コルベン たとえば、それは WordPress です 😛 (知っていましたか?)

しかし、この子は順調に進化しているので、今週の記事で彼にスポットライトを当てているのです…
実は、すぐには日の目を見ることができない将来の「サイドプロジェクト」のランディングページを作成するために使用しました… ロイヤルティカード

WordPress に関する私の話…

多くの開発者と同様に、Wordpress との関係は常に複雑でした…少なくとも最近までは…

WordPress を始める

初めてお会いしたのは2010年だったと思いますが、私が初めてブログを作成した時、ブログを作成する際に参考にさせていただきました（実際今もそうです…）。

当時、私はこのブログをインストールし、テーマを選択し、記事の公開を開始することしかできませんでした。現在のような厳密さではありませんでしたが、内容を維持していなかったとしても、ベースはすでにそこにありました。このブログと今日 このサイトにリダイレクトされます、それが今日あなたが書いているブログの基礎になりました 😁。

その後いくつかのサイドプロジェクト

私は、World of Wacraft ギルド サイトなどのサイド プロジェクトで、Wordpress をもう少し深く使い始めました (そうです、開発者の皆さん、私たちは WoW に切り替えました)…

ニュース サイト、WooComerce の「eshop」、ショーケース サイトなど。

この期間中、私はすぐに WordPress に幻滅し、いじくり回している、物事を適切に行っていないという印象を持ちました…そしてそれが私を WordPress から遠ざけたのです。

私を驚かせたDIY 😮

奇妙なコードを含むテーマ
私が見た逸話をいくつか紹介します。最初の逸話はテーマに関するもので、テーマは覚えていませんが、印象に残ったことは覚えています。

テーマは無料で、あまりきれいではありませんでしたが、当時私がやっていた DIY には十分役に立ちました。テーマをカスタマイズしたかったのですが、当時は「子テーマ」を作成する必要があるとは知りませんでした。 ” テーマを変更します (継承と同じ原理) オブジェクト指向プログラミング）。

そこで、基本テーマを変更しようとしているのですが、フッターに到達すると、PHP の「eval()」が表示されます 😮。
ただし、当時私は PHP の「シェル」が何であるかをすでに知っており、特にコード内でシェルを「隠す」ためにこの関数をよく使うことを知っていました。

PHP の専門家以外の場合、この関数を使用すると、文字列内の PHP コードを実行できます。

そして、「eval」関数は暗号化された文字列と復号化関数とともに使用されました（これはXORとbase64を使用するループでした）。

そしてあなたは私に「このコードは何をしていたのですか?」と言うでしょう。
簡単です。これは、「フッター」の「著作権」の変更を防ぐために開発者が見つけた方法です。

無料テーマの著作権を守りたいのはわかりますが、当時はその方法に満足できませんでした。

カウンターとして使用される iframe
基本的な WordPress ではすべてが「ブログ投稿」であり、その結果、それ以上のものが必要なプロジェクトに遭遇したことがありますが、それでも WordPress はそこに使用されていました…

後から考えると、なぜそうではないのですが、この場合は、拡張機能を使用してそれを行うか、(子) テーマを変更するか、そのための拡張機能を作成します。

アイデアは、ページのコンテンツの「ビュー」数をページに表示することであり、このために、カウンターをインクリメントする別のページをロードし、このカウンターを「エコー」する iframe があり、カウンターは次の場所に保存されました。別のデータベース…

そして、あなたによると、彼はどのカウンターを増分すべきかをどのようにして知ったのでしょうか?
「HTTP_REFERER」を使用するだけです。Web ページに iframe をロードすると、iframe にロードされたページの「HTTP_REFERER」で「親」ページが利用できるためです。

問題は、「HTTP_REFERER」はブラウザから送信される生データであり、Webプログラミングの基礎の1つであるということです。

クライアントから送信されたデータは絶対に信用しないでください。

そして最後に、ページをロードしたのが「ボット」であっても、ページがロードされるたびにカウンタがインクリメントされました…

これは、私が WordPress で経験した 2 つの悪名高い冒険を要約したものです…

Divi のような「wysiwyg」エディター

Divi、Elementor、CornerStone などの「wysiwyg」エディターを知る機会もありました。

なんて言うか ？ 理論的には、これは悪いアイデアではありません。コーディングの方法をまったく知らない人でも、なんとか素晴らしいことを実行できるようになります。

しかし問題は、その後開発者がさらに「さらに」作業を進めなければならないときに、DVI が変更するように設計されていない独自のコードを生成し、それが問題の始まりであるということです。

私は過去に（開発者として）これを使って何かをしようとしましたが、費用がかかりました…
このような経験をしたのは私だけではないと思います。それが、今日 WordPress の評判が非常に悪い理由です。

問題は WordPress ではなく、WordPress の使用法にありました

今にして思えば、問題は WordPress にあったわけではありません。WordPress は良い製品であり、作られたものとして使用する場合、「悪いプロジェクト」の WordPress は、DIY と、WordPress をゼロから使用しようとしたマナーの悪さの結果です。

ただし、適切に使用すると、非常にクールなことが可能になります:)

Gutenberg、古いエディタの後継

WordPress の大きな欠点の 1 つは、デザインを「さらに」進めて、特に「非開発者」がデザインを変更できるようにしたい場合、Divi のような独自の外部ソリューションを経由する必要があることでした。

そして WordPress はそれをよく理解しており、それが彼らが 2018 年 12 月に Gutenberg をリリースした理由です。当時は他にやるべきことがあったので注目しませんでしたが、一見の価値はあります。

グーテンベルクとは何ですか？

Gutenberg はブロック エディターです。つまり、コンテンツの「ブロック」を作成し、それらを「パワーポイント」のように移動できます。

しかし、特徴的なのは、「クラシック ブロック」、テキスト、画像があり、さらにその先へ進むこともできるということです…そしてそれがここで私たちが興味を持っていることです。

どの拡張機能でもブロックを追加できます

基本ブロックで探しているものが見つかりませんか? 問題ありません。ニーズを満たす既存の拡張機能を見つけるか、拡張機能を作成することができます。

拡張機能を使用したブロックの作成については、Capitaine WP のこの記事を参照してください。 Gutenbergブロックを作成する。

独自のブロックの作成を開始するには、React 😛 についての知識が必要になることに注意してください。

グーテンベルクってどんな感じ？

ここではテキストの代わりにいくつかの図を示します。ブロックのタイプを選択するには、エディターで / を使用するだけです。ここでは、拡張機能によって提供される「フォーム」ブロックを選択します。

次に、このブロックの拡張機能により、「連絡先」ブロック、ニュースレターの購読、または提案フォームを作成するかどうかを尋ねられます。

最後に、私のブロックがページ上にあります。必要なのは、右のメニューでそのスタイルを定義することだけです。

シンプルでしたね。 そして、それは WordPress であり、標準であるため、ある WordPress インスタンスから別の WordPress インスタンスにブロックをコピーできますが、当然ながら、この「ブロックの種類」を管理する拡張機能を WordPress インスタンスにインストールする必要があります。

Gutenberg を少し遊んでみた感想

それは非常にシンプルで、Wordpress は私が作成しなければならない「小規模サイト」の技術スタックに適合し、非常に短い時間でクールなものを作成できます…たとえばレストランのサイトに最適です。

必要なものが見つからず、すぐにアクセスする必要がある場合に、HTML でリターンできるという事実がとても気に入っています。将来的には、より具体的なニーズに対応して、独自のブロックをコード化します。すでにいくつかのブロックがあります。アイデア。

WordPressの技術コスト

人生において、すべてが白くなることも、すべてが黒くなることもありません。WordPress を使用すると、優れたサイトを非常に迅速に作成できますが、コストと遅さが伴います…

ここで私はブラウザに送信される CSS や JS について話しているのではなく、いいえ、それは長い間品質テーマによって規制されてきました。ページの生成時間について話しています。

確かに、 ロイヤルティカードデフォルトでは、ページ間の読み込み時間は遅くなります。これは、Wordpress がページを生成する時間です (拡張機能によって利用可能になったブロックを使用します…)。

個人的には、ページをキャッシュできる「リバース プロキシ」である「Varnish」を使用してこの問題を解決しています…根っからの Linux 好きなら、Varnish をご存知でしょう 😁。

JSとCSSに関しては、サイトでPageSpeedテストをしてみるとわかると思いますが、スコアは悪くありません…

ご参考までに、LaCarteFidélité さん、私はある午後、何をすればよいのか本当にわからなかったときに、この記事をオンラインに投稿しました 😛。
このような短期間でのこのような結果は依然として賞賛に値します。

結論

これで、私のグーテンベルクの小さな紹介記事は終わりました…
この問題については後でもう一度説明します。なぜなら、私はそれを扱う必要があることをすでに知っているからです 😁。
そしていつものように、私が発見した興味深いことについて記事を書きます…

素晴らしい一週間をお過ごしください。また次回お会いしましょう 🙂