{"id":36665,"date":"2018-02-23T09:52:33","date_gmt":"2018-02-23T08:52:33","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=36665"},"modified":"2022-04-11T13:38:47","modified_gmt":"2022-04-11T11:38:47","slug":"eigenes-wordpress-theme-bootstrap","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/","title":{"rendered":"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen"},"content":{"rendered":"\n

WordPress und Bootstrap sind ein starkes Team. Darum zeigen wir Dir, wie Du WordPress-Funktionen und Bootstrap-Komponenten f\u00fcr die Entwicklung Deines eigenes Themes verwendest. <\/p>\n\n\n\n\n\n\n\n

In diesem Beitrag <\/a>hast Du erfahren, wie Du eine Bootstrap-Navigation in WordPress integrierst. Darauf aufbauend erf\u00e4hrst Du nun, wie Du Icons einbaust und Bootstrap-Kommentarfelder verwendest. Mit JavaScript kannst du obendrein die Eingaben Deiner Leser validieren und entsprechende Meldungen einblenden (z. B. \u00bbBitte gib Deine E-Mail-Adresse ein.\u00ab). <\/p>\n\n\n\n

Wichtig<\/strong>: Diese Anleitung richtet sich an erfahrene Nutzer mit PHP-Kenntnissen. Voraussetzung ist eine lokale WordPress-Installation bzw. ein Hosting-Paket<\/a> f\u00fcr den Live-Betrieb.<\/p>\n\n\n\n

1. Dashicons integrieren<\/h2>\n\n\n\n

Bootstrap 4 beinhaltet keine Icons. Gut, dass WordPress selbst welche an Bord hat: Die sogenannten Dashicons <\/a>sind die Icons, die Du bereits aus dem Backend kennst. Wenn Du folgende Funktion in die functions.php <\/strong>eingibst, kannst Du das Icon-Set auch f\u00fcr das Frontend nutzen:<\/p>\n\n\n\n

\/\/ Enqueue Dashicons\nfunction load_dashicons_front_end(){ \nwp_enqueue_style( \u201adashicons\u2018 );\n}\nadd_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );<\/pre>\n\n\n\n
Um das Theme grafisch aufzulockern, kannst Du nun die\nLinks f\u00fcr Datum, Autor, Kategorien, Tags, Kommentare und Edit (bzw. Bearbeiten)\nmit passenden Icons versehen. Dazu musst Du die entsprechenden PHP-Dateien\nanpassen.<\/p>\n\n\n\n
\"\"
Mit Icons wirkt das Theme professioneller.<\/figcaption><\/figure><\/div>\n\n\n\n
Kalender-Icon<\/h3>\n\n\n\n
Zum\nDatum passt das Kalender-Dashicon. Trage zu diesem Zweck in die content.php<\/strong>\n\n(im Unterverzeichnis template-parts<\/strong>)\nunterhalb von\n\n\n\n<\/p>\n\n\n\n
<div class=\"entry-meta\"><\/pre>\n\n\n\n
Folgendes\nein (Zeile 24):<\/p>\n\n\n\n
<span class=\"dashicons dashicons-calendar\"><\/span><\/pre>\n\n\n\n
Weil das \u00bbPosted on\u00ab vor der Datumsangabe durch das Kalender-Icon nun \u00fcberfl\u00fcssig ist, kannst Du die W\u00f6rter in der Datei \/inc\/template-tags.php <\/strong>l\u00f6schen (Zeile 30). Die Zeile sieht anschlie\u00dfend so aus:<\/p>\n\n\n\n
Esc_html_x( '%s', 'post date', 'meintheme' ),<\/pre>\n\n\n\n
Autor-Icon<\/h3>\n\n\n\n
Alle folgenden Anpassungen betreffen ebenfalls die template-tags.php<\/strong>. Um das User-Icon vor\nden Autorenamen zu platzieren, f\u00fcgst Du (mit Leerzeichen am Anfang)<\/p>\n\n\n\n
<span class=\"dashicons dashicons-admin-users\"><\/span><\/pre>\n\n\n\n
in\ndie Zeile 50 ein:<\/p>\n\n\n\n
echo '<span class=\"byline\"> <span class=\"dashicons dashicons-admin-users\"><\/ span>' . $byline . '<\/span>'; \/\/ phpcs:ignore WordPress.Security.EscapeOutput. OutputNotEscaped<\/pre>\n\n\n\n
Das Wort \u00bbby\u00ab wird nicht mehr ben\u00f6tigt. L\u00f6sche es einfach\n(Zeile 46), sodass die Zeile wie folgt aussieht:<\/p>\n\n\n\n
esc_html_x( ' %s', 'post author', 'meintheme' ),<\/pre>\n\n\n\n
Kategorien-Icon<\/h3>\n\n\n\n
Die weiteren Meta-Angaben werden unterhalb des Inhalts\nangezeigt. Trotzdem bleibst Du in der gleichen Datei, um auch die Kategorien\nmit einem Dashicon zu versehen. Die entsprechende Klasse<\/p>\n\n\n\n
<span class=\"dashicons dashicons-category\"><\/span><\/pre>\n\n\n\n
f\u00fcgst Du in die Zeile 66 ein. Au\u00dferdem\nkannst Du wieder\n\u00fcberfl\u00fcssige W\u00f6rter streichen (\u00bbPosted in\u00ab):<\/p>\n\n\n\n
printf( '<span class=\"cat-links\"><span class=\"dashicons dashicons-category\"><\/ span>' . esc_html__( 'Posted in %1$s', 'meintheme' ) . '<\/span>', $categories_list ); \/\/ phpcs:ignore<\/pre>\n\n\n\n
Tags-Icon<\/h3>\n\n\n\n
Wie bei den Kategorien kannst Du \u00fcberfl\u00fcssigen Text\n(\u00bbTagged\u00ab) entfernen (Zeile 73). Hier wird die Klasse verwendet:<\/p>\n\n\n\n
<span class=\"dashicons dashicons-tag\"><\/span><\/pre>\n\n\n\n
printf( '<span class=\"tags-links\"><span class=\"dashicons dashicons-tag\"><\/span>' . esc_html__( ' %1$s', 'meintheme' ) . '<\/span>', $tags_list ); \/\/ phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped<\/pre>\n\n\n\n
Kommentare-Icon<\/h3>\n\n\n\n
In\nZeile 77 f\u00fcgst Du die Klasse<\/p>\n\n\n\n
<span class=\"dashicons dashicons-admin-comments\"><\/span><\/pre>\n\n\n\n
hinzu,\ndamit vor dem Kommentare-Link eine Sprechblase angezeigt wird:<\/p>\n\n\n\n
echo '<span class=\"comments-link\"><span class=\"dashicons dashicons-admin-comments\"><\/span>';<\/pre>\n\n\n\n
Edit-Icon<\/h3>\n\n\n\n
F\u00fcr\nein Edit-Icon erg\u00e4nzt Du die Zeile 109 um die Klasse<\/p>\n\n\n\n
<span class=\"dashicons dashicons-edit\"><\/span><\/pre>\n\n\n\n
'<span class=\"edit-link\"><span class=\"dashicons dashicons-edit\"><\/span>',<\/pre>\n\n\n\n
Zum Schluss kannst Du die Icons bequem \u00fcber ihre Klassen in der style.css <\/strong>ausrichten<\/p>\n\n\n\n
\/* Dashicons ausrichten *\/\n.dashicons-category { \nmargin: 0.1em;\n}\n.dashicons-tag, .dashicons-admin-comments, .dashicons-admin-users, .dashicons- edit {\nmargin: 0.1em 0.1em 0.1em 1em;\n}<\/pre>\n\n\n\n
2. Kommentarbereich mit Bootstrap optimieren<\/h2>\n\n\n\n
\"\"
Der Underscores-Kommentarbereich sieht im Auslieferungszustand etwas blass aus.<\/figcaption><\/figure><\/div>\n\n\n\n
Der Kommentarbereich ist ein gutes Beispiel f\u00fcr die Verwendung von Bootstrap- Komponenten. Die Eingabefelder von Bootstrap sehen nicht nur besser aus als das Underscores-Original, sondern lassen sich per CSS auch einfacher anpassen.<\/p>\n\n\n\n
\u00d6ffne dazu die comments.php <\/strong>und l\u00f6sche diese Zeilen:<\/p>\n\n\n\n
comment_form();\n?><\/pre>\n\n\n\n
F\u00fcge\nan gleicher Stelle den folgenden Code-Block ein:<\/p>\n\n\n\n
\/* Bootstrap Kommentarfelder *\/\n\t\n\t\/\/$consent \n\tif ( has_action( 'set_comment_cookies', 'wp_set_comment_cookies' ) ) {\n\t\t\t$consent           = empty( $commenter['comment_author_email'] ) ? '' : ' checked=\"checked\"';\n\t\t\t$fields['cookies'] = '<p class=\"comment-form-cookies-consent\"><input id=\"wp-comment-cookies-consent\" name=\"wp-comment-cookies-consent\" type=\"checkbox\" value=\"yes\"' . $consent . ' \/>' .\n\t\t\t\t\t\t\t\t '<label for=\"wp-comment-cookies-consent\">' . __( 'Save my name, email, and website in this browser for the next time I comment.' ) . '<\/label><\/p>';\n\t\t}\n\n\/\/Bootstrap Klassen\n\tob_start();\n\t$commenter = wp_get_current_commenter();\n\t$req = true;\n\t$aria_req = ( $req ? \" aria-required='true'\" : '' );\n\t\n\t$comments_arg = array(\n\t\t'form'\t=> array(\n\t\t\t'class' => 'form-horizontal'\n\t\t\t),\n\t\t'fields' => apply_filters( 'comment_form_default_fields', array(\n\t\t\t\t'author' \t\t\t\t=> '<div class=\"form-group\">' . '<label for=\"author\">' . __( 'Name', 'strato' ) . '<\/label> ' . ( $req ? '<span>*<\/span>' : '' ) .\n\t\t\t\t\t\t\t\t\t\t'<input id=\"author\" name=\"author\" class=\"form-control\" type=\"text\" value=\"\" size=\"30\"' . $aria_req . ' \/>'.\n\t\t\t\t\t\t\t\t\t\t'<p id=\"v1\" class=\"text-danger\"><\/p>' . '<\/div>',\n\t\t\t\t'email'\t\t\t\t\t=> '<div class=\"form-group\">' .'<label for=\"email\">' . __( 'E-Mail', 'strato' ) . '<\/label> ' . ( $req ? '<span>*<\/span>' : '' ) .\n\t\t\t\t\t\t\t\t\t\t'<input id=\"email\" name=\"email\" class=\"form-control\" type=\"text\" value=\"\" size=\"30\"' . $aria_req . ' \/>'.\n\t\t\t\t\t\t\t\t\t\t'<p id=\"v2\" class=\"text-danger\"><\/p>' . '<\/div>',\n\t\t\t\t'url'\t\t\t\t\t=> '<div class=\"form-group\">' .'<label for=\"url\">' . __( 'Website', 'strato' ) . '<\/label> ' .\n\t\t\t\t\t\t\t\t\t\t'<input id=\"url\" name=\"url\" class=\"form-control\" type=\"text\" value=\"\" size=\"30\" \/>'.\n\t\t\t\t\t\t\t\t\t\t'<p class=\"text-danger\"><\/p>' . '<\/div>',\n\t\t\t\t'cookies' \t\t\t\t=> '<div class=\"comment-form-cookies-consent\"><input id=\"wp-comment-cookies-consent\" name=\"wp-comment-cookies-consent\" type=\"checkbox\"' . $consent . ' \/>' .\n                                        '<label for=\"wp-comment-cookies-consent\">' . __( 'Save my name, email, and website in this browser for the next time I comment.' ) . '<\/label><\/div>',)),\n\t\t\t\t'comment_field'\t\t\t=> '<div class=\"form-group\">' . '<label for=\"comment\">' . __( 'Kommentar', 'strato' ) . '<\/label><span>*<\/span>' .\n\t\t\t\t\t\t\t\t\t\t'<textarea id=\"comment\" class=\"form-control\" name=\"comment\" rows=\"3\" aria-required=\"true\"><\/textarea>\n\t\t\t\t\t\t\t\t\t\t<p id=\"v3\"class=\"text-danger\"><\/p>' . '<\/div>',\n\t\t\t\t'class_submit'\t\t\t=> 'btn btn-primary'\n\t\t\t); ?>\n\t<?php comment_form($comments_arg);\n\techo str_replace('class=\"comment-form\"','class=\"comment-form\" name=\"commentForm\" onsubmit=\"return validateForm();\"',ob_get_clean());\n\t?>\n<\/pre>\n\n\n\n
Um zum Antworten einen Bootstrap-Button zu verwenden, f\u00fcgst Du diese Zeilen am Ende der functions.php <\/strong>ein:<\/p>\n\n\n\n
\/\/ Bootstrap Submit Button\nadd_action('comment_form', 'bootstrap4_comment_button' );\nfunction bootstrap4_comment_button() {\n    echo '<button class=\"btn btn-primary\" type=\"submit\">' . __( 'Kommentar abschicken' ) . '<\/button>';\n}<\/pre>\n\n\n\n
Nach der Aktualisierung erscheint unterhalb des grauen\nKommentar-Buttons das blaue Bootstrap-Pendant. \u00dcber die style.css <\/strong>blendest Du den alten Button einfach aus:<\/p>\n\n\n\n
\/* Underscores-Button ausblenden *\/\n.form-submit { \ndisplay: none;\n}<\/pre>\n\n\n\n
Damit auch die Reply-Links als Buttons erscheinen, ersetzt Du in der functions.php <\/strong>die originale Klasse durch die Bootstrap-Klasse (in diesem Fall .btn-primary<\/strong>):<\/p>\n\n\n\n
\/\/ Bootstrap Antworten-Button \nadd_filter('comment_reply_link', 'replace_reply_link_class');\nfunction replace_reply_link_class($class){\n    $class = str_replace(\"class='comment-reply-link\", \"class='btn btn-primary\", $class);\n    return $class;\n}<\/pre>\n\n\n\n
\u00dcber\ndas Stylesheet kannst Du die Abst\u00e4nde und Buttons-Farben anpassen:<\/p>\n\n\n\n
\/* Abstand Reply-Links *\/\n.reply {\npadding-bottom: 2rem;\n}\n\/* Abstand Cookie-Checkbox *\/ \ninput#wp-comment-cookies-consent {\nmargin-right: 0.2rem;\n}\n\/* Farbe Bootstrap-Buttons *\/\n.btn.btn-primary {\nbackground-color: #ff9900; border: #ff9900;\n}<\/pre>\n\n\n\n
Wenn alles erledigt ist, sieht Dein Kommentarbereich so aus:<\/p>\n\n\n\n
\"\"
Angepasster Kommentarbereich<\/figcaption><\/figure><\/div>\n\n\n\n
3. Validierung der Kommentarfelder<\/h2>\n\n\n\n
F\u00fcllst Du die Pflichtfelder im Kommentarbereich nicht\naus, leitet Dich WordPress standardm\u00e4\u00dfig auf eine neue Seite mit folgender\nNachricht weiter:<\/p>\n\n\n\n
\"\"
Standard-Meldung in WordPress<\/figcaption><\/figure><\/div>\n\n\n\n
W\u00e4re es nicht besser, auf der Seite zu bleiben und\nentsprechende Meldungen direkt bei den Kommentarfeldern anzuzeigen?<\/p>\n\n\n\n
Falls Du Dir den neuen Code f\u00fcr die comments.php <\/strong>genau angeschaut hast, sind  Dir vielleicht die IDs v1, v2 und v3 aufgefallen. Damit kannst Du die Kommentarfelder per JavaScript direkt beim Absenden eines Kommentars validieren und individuelle Meldungen anzeigen. F\u00fcge dazu diesen Code-Block in die comments.php <\/strong>direkt oberhalb von<\/p>\n\n\n\n
<\/div><!-- #comments --><\/pre>\n\n\n\n
ein:<\/p>\n\n\n\n
<script type=\"text\/javascript\">\n\n\/* basic javascript form validation *\/\n\t\t\tfunction validateForm() {\n\t\t\tvar form = document.forms[\"commentForm\"];\n\t\t\t\tx = form[\"author\"].value,\n\t\t\t\ty = form[\"email\"].value,\n\t\t\t\tz = form[\"comment\"].value,\n\t\t\t\tflag = true,\n\t\t\t\tv1 = document.getElementById(\"v1\"),\n\t\t\t\tv2 = document.getElementById(\"v2\"),\n\t\t\t\tv3 = document.getElementById(\"v3\");\n\t\t\t\t\n\t\t\tif (x == null || x == \"\") {\n\t\t\t\tv1.innerHTML = \"<?php echo __('Bitte gib deinen Namen ein.', 'strato'); ?>\";\n\t\t\t\txyz = false;\n\t\t\t} else {\n\t\t\t\tv1.innerHTML = \"\";\n\t\t\t}\n\t\t\t\n\t\t\tif (y == null || y == \"\") {\n\t\t\t\tv2.innerHTML = \"<?php echo __('Bitte gib deine E-Mailadresse ein.', 'strato'); ?>\";\n\t\t\t\txyz = false;\n\t\t\t} else {\n\t\t\t\tv2.innerHTML = \"\";\n\t\t\t}\n\t\t\t\n\t\t\tif (z == null || z == \"\") {\n\t\t\t\tv3.innerHTML = \"<?php echo __('Bitte gib einen Kommentar ein.', 'strato'); ?>\";\n\t\t\t\txyz = false;\n\t\t\t} else {\n\t\t\t\tv3.innerHTML = \"\";\n\t\t\t}\n\t\t\t\n\t\t\tif (xyz == false) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t\n\t\t}\n\t<\/script><\/pre>\n\n\n\n
Wenn nun ein Besucher die Felder f\u00fcr Kommentar, Name oder E-Mail leer l\u00e4sst und auf Kommentar absenden <\/strong>klickt, erh\u00e4lt er direkt folgende Meldungen:<\/p>\n\n\n\n
\"\"
Fehlermeldungen f\u00fcr die Eingabefelder<\/figcaption><\/figure><\/div>\n\n\n\n
Fast grenzenlose M\u00f6glichkeiten<\/h2>\n\n\n\n
WordPress bietet so viele Optionen, dass diese unm\u00f6glich alle in einen Beitrag passen. Die Beispiele helfen Dir, die Funktionen des CMS in Kombination mit Bootstrap f\u00fcr Dein eigenes Theme zu nutzen. In einem anderen Beitrag<\/a> zeigen wir Dir, wie Du das Design Deines Themes per CSS anpasst.<\/p>\n\n\n\n
Hinweis: Diesen Beitrag haben wir am 09.12.2020 aktualisiert.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress und Bootstrap sind ein starkes Team. Darum zeigen wir Dir, wie Du WordPress-Funktionen und Bootstrap-Komponenten f\u00fcr die Entwicklung Deines eigenes Themes verwendest.<\/p>\n","protected":false},"author":191,"featured_media":36825,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,490],"tags":[51,55],"acf":[],"yoast_head":"\nDein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen\" \/>\n<meta property=\"og:description\" content=\"WordPress und Bootstrap sind ein starkes Team. Darum zeigen wir Dir, wie Du WordPress-Funktionen und Bootstrap-Komponenten f\u00fcr die Entwicklung Deines eigenes Themes verwendest.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-23T08:52:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/02\/logos.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/\",\"name\":\"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2018-02-23T08:52:33+00:00\",\"dateModified\":\"2022-04-11T11:38:47+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen","og_description":"WordPress und Bootstrap sind ein starkes Team. Darum zeigen wir Dir, wie Du WordPress-Funktionen und Bootstrap-Komponenten f\u00fcr die Entwicklung Deines eigenes Themes verwendest.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2018-02-23T08:52:33+00:00","article_modified_time":"2022-04-11T11:38:47+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/02\/logos.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"8 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/","name":"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2018-02-23T08:52:33+00:00","dateModified":"2022-04-11T11:38:47+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/eigenes-wordpress-theme-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dein eigenes WordPress-Theme: Bootstrap-Komponenten einbauen"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/36665"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=36665"}],"version-history":[{"count":48,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/36665\/revisions"}],"predecessor-version":[{"id":94055,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/36665\/revisions\/94055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/36825"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=36665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=36665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=36665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}