{"id":440,"date":"2023-03-03T12:12:46","date_gmt":"2023-03-03T11:12:46","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=440"},"modified":"2023-04-28T07:46:51","modified_gmt":"2023-04-28T05:46:51","slug":"patterns-in-wordpress","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/patterns-in-wordpress\/","title":{"rendered":"Patterns in WordPress"},"content":{"rendered":"\n<p>Layoutvorlagen sind kein Plugin, auch wenn Anbieter fertiger Vorlagen dies manchmal suggerieren. Ich erstelle auf Basis des individuellen Designs bzw. Themes eigens f\u00fcr Ihre Website programmierte Bausteine, die somit auch garantiert mit Ihrem Projekt kompatibel sind. Diese lassen sich dann bequem mit Inhalten f\u00fcllen.<\/p>\n\n\n\n<div class=\"wp-block-group card-container-group mt-4 d-print-none data-aos_zoom-in data-aos-delay_200 data-aos-duration_400\"><div class=\"wp-block-group__inner-container\">\n<div class=\"accordion\" id=\"accordionPattern\">\n  <div class=\"accordion-item\">\n    <div class=\"accordion-header\" id=\"headingOne\">\n      <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n        Was sind Bl\u00f6cke in WordPress?\n      <\/button>\n    <\/div>\n    <div id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionPattern\">\n      <div class=\"accordion-body\">\n        Eigentlich ist es ganz einfach. In WordPress ist jeder Absatz, jede \u00dcberschrift, eine Liste oder auch beispielsweise ein einzelner Button ein eigener Block.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item\">\n    <div class=\"accordion-header\" id=\"headingTwo\">\n      <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n        Was sind Patterns bzw. Vorlagen?\n      <\/button>\n    <\/div>\n    <div id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionPattern\">\n      <div class=\"accordion-body\">\nDer Inhaltsbereich jeder Website besteht letztlich aus wiederkehrenden Layoutelementen bzw. sogenannten Patterns bzw. Block Patterns. Als Vorlage gespeicherte Layouts, die aus mehreren Bl\u00f6cken bestehen und sehr einfach eingef\u00fcgt und angepasst werden k\u00f6nnen.<br>\nGerade bei komplexeren Layouts und Formatierungen programmiere ich individuelle Vorlagen, insbesondere dann, wenn es u.&nbsp;a. um Cards bzw. K\u00e4stchen und Boxen in Verbindung mit Bootstrap geht. Diese werden direkt im Theme im Ordner <code>patterns<\/code> abgelegt und mittels <code>register_block_pattern_category<\/code> in Kategorien unterteilt, sodass Anwender:innen an passender Stelle einfach die entsprechende Vorlage w\u00e4hlen und ausf\u00fcllen k\u00f6nnen und das ganz ohne sich fortgeschrittene Designf\u00e4higkeiten anzueignen.<br>\nDie Vorlagen an sich bleiben immer erhalten, auch wenn diese in einem Beitrag ge\u00e4ndert werden.\nEs lassen sich auch entsprechende Designvorlagen f\u00fcr unterschiedliche Textbausteine anlegen, wie f\u00fcr Testimonials. Mit Inhalt gef\u00fcttert werden diese dann im individuellen, programmierten Layout ausgegeben.<br>\nDie f\u00fcr Sie vorgefertigte Vorlagen f\u00fcr Seitenlayout und Blockdesign sind dar\u00fcber hinaus auch ein n\u00fctzliches Tool, um eine konsistente Markenf\u00fchrung auf einer Website oder einem Blog aufrechtzuerhalten.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item\">\n    <div class=\"accordion-header\" id=\"headingThree\">\n      <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\">\n        Was sind wiederverwendbare Vorlagen bzw. Bl\u00f6cke?\n      <\/button>\n    <\/div>\n    <div id=\"collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingThree\" data-bs-parent=\"#accordionPattern\">\n      <div class=\"accordion-body\">\n        Es gibt Vorlagen, die auf einer Website immer wieder verwendet werden, wie beispielsweise \u00d6ffnungszeiten einer Arztpraxis oder eine Liste mit Publikationen. Mit der Wartung der Website betraute Personen m\u00fcssen diese nur an passender Stelle einf\u00fcgen und meist nicht einmal eine \u00c4nderung hinzuf\u00fcgen.<br> Verwaltet werden diese Bausteine an zentraler Stelle in WordPress. Gespeichert werden sie im Gegensatz zu den regul\u00e4ren Patterns in der Datenbank. Ein Ex- bzw. Import der <code>reusable Blocks<\/code> ist im Format <code>json<\/code> m\u00f6glich.<br>\n\u00c4ndert sich ein Baustein, weil z.&nbsp;B. Praxiszeiten sich \u00e4ndern oder eine Publikation hinzukommt, \u00e4ndert sich dieser Block automatisch auf allen Seiten innerhalb einer Domain bzw. im Falle von WordPress Multisite innerhalb einer Website.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item\">\n    <div class=\"accordion-header\" id=\"headingFour\">\n      <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseFour\" aria-expanded=\"false\" aria-controls=\"collapseFour\">\n        Was ist das WordPress Patterns Verzeichnis?\n      <\/button>\n    <\/div>\n    <div id=\"collapseFour\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingFour\" data-bs-parent=\"#accordionPattern\">\n      <div class=\"accordion-body\">\n       Hierbei handelt es sich eine Sammlung von vorgefertigten Layouts bzw. Blockmustern oder -vorlagen, die verwendet werden k\u00f6nnen, um Seiten zu gestalten. Die Muster umfassen eine Reihe von Bl\u00f6cken, die zusammen gruppiert sind, um bestimmte Designs zu erstellen.<br>\nNicht immer muss das Rad neu erfunden werden, auch ich lasse mich gerne von anderen inspirieren. Die Erfahrung lehrt aber auch, dass es immer \u00c4nderungen bedarf und die Vorlagen nicht unreflektiert \u00fcbernommen werden sollten. Zum einen sind oft genug Bilder oder Hintergr\u00fcnde von externen Websites integriert und zum anderen sind die Layouts vielfach von Designern erstellt. Diese nutzen \u00dcberschriften, Fettungen u.&nbsp;\u00e4. als gestalterisches Element, was vollkommen kontr\u00e4r zu Struktur und Optimierung f\u00fcr Suchmaschinen (SEO) steht.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"accordion-item\">\n    <div class=\"accordion-header\" id=\"headingFive\">\n      <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseFive\" aria-expanded=\"false\" aria-controls=\"collapseFive\">\n        Wie kommt im Block Editor Gutenberg Farbe ins Spiel?\n      <\/button>\n    <\/div>\n    <div id=\"collapseFive\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingFive\" data-bs-parent=\"#accordionPattern\">\n      <div class=\"accordion-body\">\n        Mittels der Datei <code>theme.json<\/code> lassen sich globale Stile, aber auch Elemente einzelner Bl\u00f6cke individualisieren und Farben hinterlegen. Standardm\u00e4\u00dfige Einstellungen von WordPress, die f\u00fcr individuelle Themes bzw. Layouts wenig geeignet sind, lassen sich hier auch deaktivieren, z.&nbsp;B. mit <code>\"defaultPalette\": false<\/code> und eine eigene Farbpalette mit <code>palette<\/code> hinzuf\u00fcgen.<br>\nWordPress generiert aus dem oben genannten Datei dann die entsprechenden Inlinestyles. Da ich aber gerne die Kontrolle habe und mit der Menge an Code, der derzeit ausgegeben wird, nicht zufrieden bin, habe ich diese Funktion deaktiviert und trage die entsprechenden Farbwerte nach dem Schema <code>has-[name-der-farbe]-color<\/code> in mein Stylesheet ein.<br>\nEs lassen sich nun den einzelnen Elementen bzw. Bl\u00f6cken der Website quasi intuitiv entsprechende Farben zuweisen, wobei wir eine der definierten Farben oder einen beliebigen hexadezimalen Farbcode w\u00e4hlen k\u00f6nnen.\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group call-to-action-group d-print-none\"><div class=\"wp-block-group__inner-container\">\n<p class=\"call-to-action-text\">Lust auf mehr?<br>Sichern Sie sich ein kostenfreies Vorgespr\u00e4ch!<\/p>\n\n\n<div class=\"wp-bootstrap-blocks-button\">\n\t<a\n\t\thref=\"https:\/\/www.servicepraxis.com\/kontakt\/\"\n\t\t\t\t\t\tclass=\"btn call-to-action-button btn-secondary\"\n\t>\n\t\tJetzt kontaktieren\t<\/a>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group card-container-group card card-with-background mt-4 mb-4 d-print-none data-aos_zoom-in data-aos-delay_200 data-aos-duration_400\"><div class=\"wp-block-group__inner-container\">\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.servicepraxis.com\/plugins\/wp-content\/uploads\/sites\/6\/blg_6_patterns_001.mp4\" playsinline><\/video><\/figure>\n\n\n\n<div class=\"wp-block-group card-body\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"fw-lg-bold wp-block-heading\">Arbeiten mit Patterns<\/h3>\n\n\n\n<p>Vorlagen machen das Leben leichter! Intuitiv die Inhalte der eigenen Website gestalten und das volle Potenzial von WordPress als Redaktions- bzw. Content-Management-System nutzen.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Layoutvorlagen sind kein Plugin, auch wenn Anbieter fertiger Vorlagen dies manchmal suggerieren. Ich erstelle auf Basis des individuellen Designs bzw. Themes eigens f\u00fcr Ihre Website programmierte Bausteine, die somit auch garantiert mit Ihrem Projekt kompatibel sind. Diese lassen sich dann bequem mit Inhalten f\u00fcllen. Was sind Bl\u00f6cke in WordPress? Eigentlich ist es ganz einfach. In [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":438,"parent":0,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-440","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/440\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}