Page Builder, Block Editor und die interne Suche

Wir können im Frontend und im Backend von WordPress suchen, aber diese Suche ist ... einfach. Es ist nur eine einfache SQL-Volltextsuche. Ihr fehlen viele Funktionen, wie Relevanz, Hervorhebung, Synonyme usw.

In Zeiten von Page Buildern und vom Block Editor kommt diese einfache interne Suche an ihre Grenzen. Die Suche funktioniert überhaupt nicht oder es gibt zu viele falsch positive Suchergebnisse.

Bei welchen Page Buildern funktioniert die Suche und warum geht sie kaputt? Was kann die Suche und was nicht? Und wie können wir sie erweitern?

Wir tauchen tief in die Suche von WordPress ein und finden heraus, was da eigentlich kaputt ist und wie man es beheben kann!

Transcript

1. Page Builder, Block Editor und die interne Suche WordPress Meetup Hamburg – September 2023 Torsten Landsiedel @zodiac1978
2. Wie funktioniert die Suche?
3. Die WordPress-Suche
4. SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts WHERE 1=1 AND (((wp_posts.post_title LIKE '%wat%') OR (wp_posts.post_excerpt LIKE '%wat%') OR (wp_posts.post_content LIKE '%wat%'))) Wie sieht der Standard-Query genau aus?
5. Es werden also die Tabellen post_title, post_excerpt und post_content durchsucht. Wo sucht WordPress eigentlich?
6. • Kategorien, Schlagwörter, eigene Taxonomien, Custom Post Types, Custom Fields • Kommentare • Stopwords • “-keyword” (seit 4.1) Wo und was sucht WordPress nicht?
7. • Highlighting • AND, OR und andere Sonder-Suchen • Fuzzy matching / Synonyme • Suche “mit Phrase” • … Was kann die WordPress-Suche nicht?
8. Stoppwörter nennt man (...) Wörter, die bei einer Volltextindexierung nicht beachtet werden, da sie sehr häufig auftreten und gewöhnlich keine Relevanz für die Erfassung des Dokumentinhalts besitzen. Was sind Stoppwörter?
9. Was sind Stoppwörter? EN: about,an,are,as,at,be,by,com,for,from,how,in,is,it,of,on,or,that,the,th is,to,was,what,when,where,who,will,with,www DE ein,eine,einer,der,die,das,und,oder,doch,sind,ist,war,für,von,in,an,zu, über,mit,dies,diese,diesen,dieser,wer,wo,wie,was,www,nicht
10. orderby => “relevance” (Standard für Suche // seit 3.7) Sortiert Suchbegriffe in der folgenden Reihenfolge: 1. Ob der gesamte Satz im Titel übereinstimmt (#1). 2. Ob alle Suchbegriffe im Titel vorkommen (<7 Suchwörter) (#2). 3. Ob einer der Suchbegriffe im Titel vorkommt (#3). 4. Ob der gesamte Satz im Auszug (#4) (oder Inhalt, #5) vorkommt. 5. Alles andere #6 Wie zeigt WordPress das Ergebnis an? (1)
11. Wenn die Suchbegriffe einen negativen Query (-keyword) enthalten, dann versucht WordPress natürlich keinen “sentence match”. Wie zeigt WordPress das Ergebnis an? (2)
12. Und die Page Builder?
13. # Enfold # Avada # PageLayer # Beaver Builder # Elementor # Brizy # Divi Page Builder bei denen die Suche funktioniert # Visual Composer # WPBakery Page Builder
14. # Bricks (saves via (prefix)_postmeta/custom field) "Query Bricks data in search results" muss aktiviert werden! Manche erfordern Konfiguration
15. # Breakdance Grund: In post_content ist nur das hier: "<!-- wp:breakdance/block-breakdance-launcher /-->" Die echten Daten sind in einem custom field “breakdance_data” in (prefix)_postmeta. Manche sind kaputt …
16. # Nimble Grund: Der Inhalt ist gespeichert unter einer anderen ID und einem anderen CPT (nimble_post_type), die Tabelle post_content ist schlicht leer. Leider keine Antwort nach Meldung im Supportforum: https://wordpress.org/support/topic/search-is-completely-broken/ … und es ist ihnen manchmal egal.
17. Wie werden die Inhalte gespeichert?
18. <!-- wp:heading --> <h2>This is a heading (H2)</h2> <!-- /wp:heading --> Block Editor (Gutenberg) – HTML Comments
19. <!-- wp:fl-builder/layout → <p>Wordpress</p> <!-- /wp:fl-builder/layout --> Beaver Builder – HTML Comments
20. <!-- wp:pagelayer/pl_row {"stretch":"auto","col_gap":10,"width_content":"auto","row_height":"default","overlay_hover_del ay":400,"row_shape_top_color":"#227bc3","row_shape_top_width":100,"row_shape_top_height": 100,"row_shape_bottom_color":"#e44993","row_shape_bottom_width":100,"row_shape_bottom _height":100,"pagelayer-id":"hyz3575"} →<!-- wp:pagelayer/pl_col {"widget_space":15,"overlay_hover_delay":400,"pagelayer-id":"89l6931"} --><!-- wp:pagelayer/pl_heading {"text":"\u003ch2\u003eHyperHyper\u003c/h2\u003e","heading_state":"normal","pagelayer-id ":"89g7207"} --><h2>HyperHyper</h2><!-- /wp:pagelayer/pl_heading --><!-- /wp:pagelayer/pl_col --><!-- /wp:pagelayer/pl_row --> PageLayer – HTML Comments
21. <p>Elementor</p> <style>/*! elementor - v3.14.0 - 26-06-2023 */ .elementor-widget-image{text-align:center}</style> <img src="/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy" /><link rel="stylesheet" href="/plugins/elementor/assets/css/widget-icon-box.min.css"> <h3>This is the heading</h3> Elementor – HTML / Inline Styles
22. <!--vcv no format--><!-- vcwb/dynamicElementComment:9a2bc876 --><div class="vce-row-container" data-vce-boxed-width="true"><div class="vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top" id="el-9a2bc876" data-vce-do-apply="all el-9a2bc876"><div class="vce-row-content" data-vce-element-content="true"><!-- vcwb/dynamicElementComment:b92ba6f9 --> Visual Composer – HTML + Comments
23. <div id="pl-6" class="panel-layout" ><div id="pg-6-0" class="panel-grid panel-no-style" data-style="{&quot;background_image_attachment&quot;:false,&quot;bac kground_display&quot;:&quot;tile&quot;,&quot;background_image_size&q uot;:&quot;full&quot;,&quot;border_thickness&quot;:&quot;1px&quot;,&q uot;full_height&quot;:&quot;&quot;,&quot;cell_alignment&quot;:&quot;fle x-start&quot;}" > Site Origin – HTML / Data Attribut für Styles
24. <div class="brz-root__container brz-reset-all"><section data-uid="kmvqqoudsejptxtriipntyksonfyjdtlpgzs" id="kmvqqoudsejptxtriipntyksonfyjdtlpgzs" name="kmvqqoudsejptxtriipntyksonfyjdtlpgzs" class="brz-section brz-css-uaqzd"> (...) <!-- version:1685113538 --> Brizy – HTML / Data Attribut + Comment
25. {"tree_json_string":"{\"root\":{\"id\":1,\"data\":{\"type\":\"root\",\"propertie s\":[]},\"children\":[{\"id\":100,\"data\":{\"type\":\"EssentialElements\\\\Sec tion\",\"properties\":{\"design\":{\"spacing\":{\"padding\":{\"breakpoint_bas e\":{\"top\":{\"number\":200,\"unit\":\"px\",\"style\":\"200px\"}},\"breakpoi nt_tablet_portrait\":{\"top\":{\"number\":160,\"unit\":\"px\",\"style\":\"160 px\"}},\"breakpoint_phone_landscape\":{\"bottom\":null}}}}}},\"children\":[{\" id\":103,\"data\":{\"type\":\"EssentialElements\\\\Div\",\"properties\" (…) Breakdance – JSON (in Custom Field)
26. a:4:{s:10:"collection";a:6:{i:0;a:5:{s:2:"id";s:10:"loop_start";s:5:"level";s:8:"lo cation";s:10:"collection";a:0:{}s:7:"options";a:0:{}s:7:"ver_ini";s:5:"3.3.2";}i:1; a:5:{s:2:"id";s:14:"before_content";s:5:"level";s:8:"location";s:10:"collection ";a:1:{i:0;a:5:{s:2:"id";s:22:"__nimble__5a0db3a00e90";s:5:"level";s:7:"sectio n";s:10:"collection";a:2:{i:0;a:4:{s:2:"id";s:22:"__nimble__7fcf218df3e3";s:5:" level";s:6:"column";s:10:"collection";a:1:{i:0;a:5: (…) Nimble – JSON (in eigenem CPT)
27. [vc_row][vc_column][vc_column_text]HyperHyper[/vc_c olumn_text][/vc_column][/vc_row] WPBakery – Shortcodes
28. [et_pb_section fb_built="1" theme_builder_area="post_content" _builder_version="4.22.2" _module_preset="default"][et_pb_row _builder_version="4.22.2" _module_preset="default" theme_builder_area="post_content"][et_pb_column _builder_version="4.22.2" _module_preset="default" type="4_4" theme_builder_area="post_content"][et_pb_text _builder_version="4.22.2" _module_preset="default" theme_builder_area="post_content" hover_enabled="0" sticky_enabled="0"] <p>HyperHyper</p> [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section] Divi – Shortcodes
29. [fusion_builder_container type="flex" hundred_percent="no" hundred_percent_height="no" min_height_medium="" min_height_small="" min_height="" hundred_percent_height_scroll="no" align_content="stretch" flex_align_items="flex-start" flex_justify_content="flex-start" flex_wrap_medium="" flex_wrap_small="" flex_wrap="wrap" flex_column_spacing="" hundred_percent_height_center_content="yes" equal_height_columns="no" container_tag="div" menu_anchor="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" status="published" publish_date="" class="" id="" spacing_medium="" margin_top_medium="" margin_bottom_medium="" spacing_small="" margin_top_small="" margin_bottom_small="" (...) Avada – Shortcodes
30. <!-- wp:shortcode --> [av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_width='10' row_boxshadow_color='' custom_margin='' margin='0px' av-desktop-margin='' av-medium-margin='' av-small-margin='' av-mini-margin='' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' min_col_height='' padding='' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' (...) Enfold – Shortcodes + Comments
31. Probleme mit der Suche?
32. <!-- wp:paragraph {"align":"center","backgroundColor":"very-light-gray","fontSize":"small"} --> <p class="has-text-align-center has-very-light-gray-background-color has-background has-small-font-size"><p style="color:#000000;text-align:center" class="has-background has-small-font-size has-very-light-gray-background-color">Gutenberg Sample Content.</p></p> <!-- /wp:paragraph --> Zu viele Ergebnisse …
33. <!-- wp:paragraph {"align":"center","backgroundColor":"very-light-gray","fontSize":"small"} --> <p class="has-text-align-center has-very-light-gray-background-color has-background has-small-font-size"><p style="color:#000000;text-align:center" class="has-background has-small-font-size has-very-light-gray-background-color">Gutenberg Sample Content.</p></p> <!-- /wp:paragraph --> … denn nur gelb ist relevant …
34. Suche nach “Image”, “Builder”, “Paragraph”, etc. sind eigentlich in keinem Builder möglich ohne Unmengen an falschen Suchergebnissen zu finden. Und die PageBuilder?
35. Wie kann die Suche modifiziert werden?
36. • wp_search_stopwords • wp_query_search_exclusion_prefix • posts_search_orderby • pre_get_posts (+ is_search // “conditional tag”) • posts_search (posts_where) Filter
37. • CPT hinzufügen • Auf CPT beschränken • Custom Fields hinzufügen (Performance!) • Auf einzelne Seiten (+Unterseiten) beschränken • Einzelne Seiten ausschließen • Einzelne Autoren ausschließen • Membership-Inhalte ausschließen Mögliche Ideen
38. SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts INNER JOIN wp_postmeta ON wp_posts.ID = wp_postmeta.post_id WHERE 1=1 AND (((wp_posts.post_title LIKE '%wat%') OR (wp_posts.post_excerpt LIKE '%wat%') OR (wp_posts.post_content LIKE '%wat%') OR (wp_postmeta.meta_value LIKE '%wat%'))) Custom Fields (Performance! ❌)
39. SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts INNER JOIN wp_postmeta ON wp_posts.ID = wp_postmeta.post_id WHERE 1=1 AND (((wp_posts.post_title LIKE '%wat%') OR (wp_posts.post_excerpt LIKE '%wat%') OR (wp_posts.post_content LIKE '%wat%') OR (wp_postmeta.meta_key = 'breakdance_data' AND wp_postmeta.meta_value LIKE '%wat%'))) Custom Fields (Performance! ✅)
40. Wie kann die Suche repariert werden?
41. Via Plugin
42. REGEXP_REPLACE({$wpdb->posts}.post_content, '<.+?>', '') LIKE '%{$search_query}%'"; RegEx wird jedoch einen Performance-Impact haben. Bessere Lösung wäre ein eigener Index (z.B. via Plugin). Nur für MySQL 8.0.4+ und MariaDB 10.0.5+
43. Welche Plugins gibt es da?
44. Relevanssi Better Search Ivory Search WP Fast Total Search Ajax Search Lite Search & Filter WP Extended Search PRO SearchWP Ajax Search Search & Filter Pro Plugin-Empfehlungen:
45. algolia ElasticSearch (ElasticPress) Programmable Search Engine (Google) Apache Solr (WPsolr) OpenSearch Oder externe Lösungen (teuer, für Profis):
46. Vielen Dank! Slack // Twitter // Mastodon // WordPress.org // Github @zodiac1978