Videos in Beiträgen

Um Videos in Beiträgen mit dem Video-Tag zu posten, gibt es grundsätzlich zwei Möglichkeiten. Entweder man benutzt den WP-Shortcode , auch erklärt unter https://codex.wordpress.org/Video_Shortcode , oder man verwendet den Html5-Tag <video> – welche in beiden Fällen natürlich in der Text-Ansicht des Beitrages eingegeben werden müssen. Die Parameter beider Tags sind ähnlich, allerding ist bei Videos, die in einer Schleife laufen (Parameter “loop=’on'” bzw. “loop”) bei dem WP-Shortcode ein “Ruckeln” festzustellen, weshalb man z.B. bei der Darstellung von “Cinemagrammen” (cinemagraphs) den Html5-Code verwenden sollte – dieser läuft (je nach Rechner-Leistung) einigermaßen ruckelfrei ab.

 
Braut-Foto nachträglich bearbeitet

 
Fantasy- und Cosplay Shooting-Treffen München, Model: Maria Gurau

Neuen oder zusätzlichen Footer erstellen

Footer- und andere Widget-Areas werden in der Funktion “functions.php” definiert (Design -> Editor). Vor der Änderung sollten Sie die Datei lokal sichern, falls bei der Änderung etwas schief geht. Finden Sie den Bereich, wo bereits Widget-Areas definiert werden und fügen Sie die folgenden Funktionen hinzu:

register_sidebar( array(
‘name’ => ‘Footer Sidebar 1’,
‘id’ => ‘footer-sidebar-1’,
‘description’ => ‘Appears in the footer area’,
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
register_sidebar( array(
‘name’ => ‘Footer Sidebar 2’,
‘id’ => ‘footer-sidebar-2’,
‘description’ => ‘Appears in the footer area’,
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
register_sidebar( array(
‘name’ => ‘Footer Sidebar 3’,
‘id’ => ‘footer-sidebar-3’,
‘description’ => ‘Appears in the footer area’,
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );

Öffnen Sie nun die Datei “footer.php” (auch hier vorher BackUp-Datei anlegen) und kopieren Sie den folgenden Source-Code an die Stelle, wo die Bereich angezeigt werden sollen, z.B. im div “Site-Info”, wo vorher stand “Wordpress proudly presents …”:

Sie können Sie den neuen Footer nach Ihren Wünschen gestalten, z.B. mit bootstrap-Klassen als 3-zeiliges Widget:

<!– Custom Footer –>
<div id=”footer-sidebar” class=”row secondary”>
<div id=”footer-sidebar1″ class=”col-sm-4″>
<?php
if(is_active_sidebar(‘footer-sidebar-1’)){
dynamic_sidebar(‘footer-sidebar-1’);
}
?>
</div>
<div id=”footer-sidebar2″ class=”col-sm-4″>
<?php
if(is_active_sidebar(‘footer-sidebar-2’)){
dynamic_sidebar(‘footer-sidebar-2’);
}
?>
</div>
<div id=”footer-sidebar3″ class=”col-sm-4″>
<?php
if(is_active_sidebar(‘footer-sidebar-3’)){
dynamic_sidebar(‘footer-sidebar-3’);
}
?>
</div>
</div>
<!– End Custom Footer –>

In der Datei “styles.css” können Sie nun noch das Layout gestalten, z.B. so:

/* Custom Footer */
#footer-sidebar {
display:block;
height: 150px;
}
#footer-sidebar1 {
float: left;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
margin-right:5px;
}
#footer-sidebar3 {
float: left;
}
/* End Custom Footer */

Eintrag “Stolz präsentiert von WordPress” entfernen

Zum Entfernen dieses Fußzeilen-Eintrages gehen Sie unter “Design -> Editor” in die Datei “footer.php” (Theme Footer) und löschen die Zeilen zwischen den folgenden Tags:

<div class=”site-info”>
<hier steht irgendetwas mit “Proudly presents …”>
</div><!– .site-info –>

An dieser Stelle können Sie dann auch ggf. einen eigenen Footer-Text eingeben.

Video-Hintergrund mit Html5

Wenn Sie einen Live-Hintergrund einbetten wollen, gehen Sie auf „Design -> Editor“ und wählen die Datei aus,
in der das Video eingebunden werden soll, z.B. „front-page.php“ (Statische Startseite).

Hier fügen Sie ans Ende der Datei den src-code ein, der zur Video-Datei führt, z.B.:

<video class=“BG“ autoplay=“autoplay“ loop=“loop“ muted=““>
<source src=“http://www.cinemagramme.de/video/Cinemagramme/Cinegramm-StadtAmMeer-1-wz.mp4″ type=“video/mp4″ />
</video>

Zuletzt müssen Sie noch die Style-Eigenschaften anpassen, um die Datei als Hintergrund zu definieren. Dies wird
in der Datei „styles.css“ (Stylesheet) vorgenommen:


/* Custom Styles */
.BG {
position:fixed;
width:100%;
height:auto;
top:0px;
left:0px;
z-index:1;
}

Damit das Hintergrundbild über die ganze Seite erscheint, muss der Hintergrund für den Content-Bereich auf „none“ gesetzt werden:


/* Custom Styles */
#content {
background:none !important;
  /* wichtig, damit folgende style-defs für „content“ ignoriert werden */
}

Hinzufügen von Fonts und deren Dateien

Um spezielle Fonts zu definieren, müssen Sie diese in der Datei „styles.css“ definieren.

Geben Sie in Ihren Bereich „Custom Styles“ ihre Font-Definition an: z.B. für den „Kausham Script“-Font:


@font-face {
font-family: ‚Kaushan Script‘;
font-style: normal;
font-weight: 400;
src: local(‚Kaushan Script‘), local(‚KaushanScript-Regular‘), url(https://fonts.gstatic.com/s/kaushanscript/v5/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2) format(‚woff2‘);
}

Wenn Sie dann z.B. den Titel Ihrer Seite (site-title) mit dem Font belegen wollen, ggf. noch eine Font-Größe und einen Schatten dabei haben wollen, fügen Sie nach der Font-Definition folgenden Code ein:


.site-title {
font-family: „Kaushan Script“,“Helvetica Neue“,Helvetica,Arial,cursive !important;
font-size: 3em;
text-shadow: 2px 2px 2px #333;
}

Integration von Bootstrap-Tools in ein WordPress-Theme

Achtung: Wenn beim Einfügen der Änderung irgendein Zeichen verloren geht, dass einen Syntax-Fehler auslöst, funktioniert WordPress nicht mehr!
Daher sollten Sie vorsichtshalber eine BackUp-Datei von “functions.php” lokal abspeichern, die Sie dann notfalls wieder ins Verzeichnis “wp-content/themes/<IhrTheme>/ abspeichern können.
Danach gehen Sie vor wie folgt:

Zunächst laden Sie sich die aktuelle Bootstrap-Version herunter (hier: 3.3.7.) und kopieren die Dateien „bootstrap.min.css“ und „bootstrap.min.js“ in das
Verzeichnis, wo Ihr WordPress-Theme steht, z.B. ../wp-content/themes/<IhrTheme> – am besten in ein aussagekräftiges Unterverzeichnis, wie z.B. „/bootstrap/css“
und „/bootstrap/js“.
Anschließend gehen Sie im Dashboard zu „Design -> Editor“ und rufen die Datei „functions.php“ unter Theme-Funktionen“ auf. In dem Bereich, wo bereits Funktionen mit dem Namen “wp_enqueue_script” oder “wp_enqueue_style” aufgeführt sind, ergänzen wir die folgenden Zeilen:

/* 1. Bootstrap CSS */
wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/bootstrap/css/bootstrap.min.css’, array(), ‘3.3.7’ );

/* 2. Bootstrap JS */
wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/bootstrap/js/bootstrap.min.js’, array( ‘jquery’ ), ‘3.3.7’, true );

Wenn alles geklappt hat, funktioniert Ihr WordPress noch und die bootstrap Funktionen können genutzt werden.