Bootstrap WordPress-Integration

von | Nov 26, 2017 | WordPress | 0 Kommentare

Die meisten Themen behaupten, sie wären “responsive” – und sind es auch im Wesentlichen – aber wie sie das tun, dazu gibt es praktisch keine Dokumentation. Was ist nun, wenn man eines der hübschen Features wie Popup oder ein Bilderkarusell einsetzen möchte? Ja, dazu gibt es PlugIns aber es gibt auch Bootstrap, ein CSS-Framework, das viele dieser Attraktionen an Bord hat.

Bootstrap in ein bestehendes Thema integrieren

Man benutzt die im Web gespeicherte Originalversion

[code lang=”html”]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
[/code]

Damit ein einzelner Server nicht unter den vielen Anfragen zusammenbricht, kommt dafür ein so genanntes Content Delivery Network (CDN) zur Anwendung, beim dem die Dateien weltweit auf viele Server verteilt sind. Im obigen Beispiel sieht man, dass hier schon die Version 4 von Bootstrap zur Anwendung kommt.

Man hostet die Dateien am eigenen Server

In dem obigen Code ersetzt man die Web-Adresse https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2 durch /bootstrap.

Wie kommt aber der obige Code in das bestehende Thema?

Gar nicht, denn es ist nicht ratsam, ein bestehendes Thema zu verändern. Käme ein Upgrade, würden die Änderungen überschrieben werden.

Child-Thema

Der erste Schritt ist es daher, ein Child-Theme anzulegen. Es ist ratsam, diese Dinge dem PlugIn Child Theme Configurator zu überlassen: https://wordpress.org/plugins/child-theme-configurator/ (mehr als 100.000 Installationen). Die Anwendung der Konfigurators findet man in Dashboard -> Werkzeuge -> Kindthemen.

Ich habe als Elternthema “Twenty Seventeen” ausgewählt und untersuche im Schritt 3 des Konfigurators dieses Thema. Man bekommt als Antwort “Dieses Thema scheint als Kindthema in Ordnung zu sein.” (In anderen Versuchen kommt es auch zu vereinzelten Fehlermeldungen, die man aber meist übergehen kann.)

Alle anderen Punkte 4-9 wurden in der Voreinstellung belassen und das Kindthema “Twenty Seventeen Child” wurde erzeugt.

In Dashboard -> Design -> Themes aktiviert man das neue Thema. Am Aussehen der Seite ändert sich dadurch nichts.

Geht man in den Editor (Dashboard -> Design -> Themes -> Editor) sieht man, dass im Verzeichnis des Kindthemas zwei Dateien angelegt wurden: style.css und functions.php. In style.css ist nur Kommentar, der aber nicht gelöscht werden darf, verweist er doch auf das Elternthema. In functions.php ist bereits eine Sequenz eingesetzt, die bewirkt, dass die Datei style.css eingelesen wird.

Folgende externe Dateien müssen also eingelesen werden:

Style
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

JavaScript
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

Dazu benötigt man folgende Zeilen in functions.php, die das tun:

[code lang=”php”]
function theme_styles() {
wp_enqueue_style( ‘bootstrap_css’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css’ );
// wp_enqueue_style( ‘main_css’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_styles’);

function theme_js() {
global $wp_scripts;
wp_enqueue_script( ‘jquery_js’, ‘https://code.jquery.com/jquery-3.2.1.slim.min.js’);
wp_enqueue_script( ‘popper_js’, ‘https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js’);
wp_enqueue_script( ‘bootstrap_js’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js’);
// wp_enqueue_script( ‘my_custom_js’, get_template_directory_uri() . ‘/js/scripts.js’);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_js’);
[/code]

Aktueller Hinweis: Bedauerlicherweise kann man gerade jetzt, nach dem Update auf die Version 4.9 mit dem im Dashboard eingebauten Editor diese Ergänzungen nicht vornehmen. Man muss diesen Code daher entweder über das Panel (https://panel.ccc.at) oder über Ftp auf den Server bringen. Diskussion über diesen Bug.
Damit ich diesen Artikel fertigstellen konnte, habe ich dieses Testweb auf die Version 4.8 zurückgestellt, um die Ergänzung in functions.php mit den Mitteln von WordPress anbringen zu können (und ohne Ftp der das WebSitePanel bemühen zu müssen).

Mit dieser Ergänzung kann man auf der Webseite alle Klassen von Bootstrap verwenden, und wir können einen Test unternehmen. Auf der Beispielseite Bootstrap-Beispiele wurden einige Kodebeispiele aus der Homepage von Bootstrap kopiert und eingefügt.
Bootstrap in Thema integriert

So schaut der Beispiel-Kode aus. Wesentlich sind die Klassennamen im Attribut class, die allesamt aus dem Bootstrap-Framework stammen:
[code lang=”html”]
<div style="display: flex;">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
</div>

<div style="display: flex;">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="bg-info clearfix" style="display: flex;">
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
Das ist ein
<code>Code</code>.
<script>
$(function () {
$(‘[data-toggle="tooltip"]’).tooltip()
})
</script>
<img data-toggle="tooltip" data-placement="top" title="auer und schobesberger" class="img-fluid rounded" src="http://wp.clubcomputer.at/2017/wp-content/uploads/2017/11/vertragsverlaengerung.png"
alt="" />
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>

<!– Button trigger modal –>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>

<!– Modal –>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Das ist der Text für das Popup-Fenster
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="alert alert-primary" role="alert">
This is a primary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://clubcomputer.at/wp-content/uploads/sites/6/2017/11/lamp-wimp.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://clubcomputer.at/wp-content/uploads/sites/6/2017/11/wordpress.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://clubcomputer.at/wp-content/uploads/sites/6/2017/11/php-2.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/code]

Themen, die auf Bootstrap aufbauen

Es gibt sehr viele Themen, die bereits auf Bootstrap aufbauen, die es einem aber ersparen, irgendwelche Kopdierungen ergänzen zu müssen.

Eine Bootstrap-Template in eine WordPress-Webseite verwandeln

Für besonders Mutige gibt es eine Schritt-für-Schritt-Anleitung, die zeigt, wie man eine Bootstrap-Template in ein WordPress-Thema verwandeln kann. Die Anleitung ist zwar schon älter aber sie ist ein guter Ansatz, die Vorgangsweise zu skizzieren. Nur für erfahrene WordPress-User!

Teil1 • Teil2 • Teil3 • Teil4 • Teil5

Franz Fiala

Ehemaliger Präsident Clubcomputer / Herausgeber PCNEWS bei ClubComputer.at
Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.

Letzte Artikel von Franz Fiala (Alle anzeigen)

Kommentar absenden

Zur Werkzeugleiste springen