https://codex.wordpress.org/Conditional_Tags
Kategorie: Wordpress
Toolset als Toolbox für WP
Menüsysteme
Theme OnePager
$args = array(
// 'category' => 3, Keine Einschränkung nötig
'posts_per_page'=> 100,
'post_type' => 'page',
'child_of' => $post->ID,
'post_parent' => $post->ID,
'post_status' => 'private',
'orderby' => 'menu_order',
'order' => 'asc' );
Theme Header
<html <?php language_attributes(); ?> class="no-js">
Gridzy – Responsive and Justified Image Grid Gallery
https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061
(18)5.00 stars 399 Sales
Live PreviewScreenshots Share FacebookGoogle PlusTwitterPinterest
Description
Gridzy.js is a justified gallery, that is built for HTML beginners as well as for power users. The basic usage is incredibly simple and can be learned within a few seconds. But the real power of Gridzy.js is its flexibility. You can use your very own semantic HTML and can style the gallery as you like. The built-in filter system and the API allow a very dynamic use.
Galery tools
How to optimize image loading on your website
A website full of images can be a huge bottleneck for website performance. This is how I optimized image loading to accomplish a better user experience.
Joeri SmitsFollowSep 25, 2017
Having a website full of beautiful images is great and all but can be a huge bottleneck for page loading. I often see websites that load several megabytes worth of images just to have a slider on their homepage. Imagine yourself on a slow 3G cellular connection loading that website. That would take ages to load and results in users leaving your website. A good way to test this on your current website is by selecting network throttling in Chrome Devtools.
Problem
The problem here is that often the site document is already loaded while the images are still loading. This results in empty sections on your page where an image slowly loads in. Not the thing you want.
In the example below I created a simple website that contains a background image of 4.8MB. As you can see the DOM is loaded in 1.14 seconds. So basically the user sees the content after 1.14 seconds. Pretty good for a 3G network. However, the background image takes 27.32 seconds to load where the user sees parts of the images loading in. The user might already have left your website at this time.
It seems that not only your user experience is dropping because of this. In 2010 Google stated that page speed is a factor in their ranking algorithm. My expectation is that this has become a more and more important factor over the years. Google seems to invest a lot in letting developers know about page performance in their conferences.
Solution
So how do we overcome this issue? Well, the first thing we can do is to compress the background image by using various tools on the internet. This is an easy win and will reduce the load time to around ten seconds. This seems like a huge step but ten seconds is still way too much.
The next step would be to load a so-called ‘placeholder’ image before we actually load the original image. This ‘placeholder’ is a low-resolution variant of the original image. When we create this image we have reduced the resolution of the image from 7372×4392 pixels to 20×11 pixels. This results in an image size from 4.8MB to 900 bytes.
This reduction in size results in a load time of 550 milliseconds instead of the 10 seconds. But now we have a low-resolution blurred image as our background. This is perfect for the first seconds the page is loading but we want to give the user the great experience of our original background image.
To do so we want to first load in the low-resolution image and already load the high-resolution image asynchronous in the background. Once the high-resolution image is loaded we want to change the low resolution with the high -resolution image.
To accomplish this I used the following javascript I loaded in before the end body tag. This way our script is not render-blocking our page content.
(() => {
'use strict';
// Page is loaded
const objects = document.getElementsByClassName('asyncImage');
Array.from(objects).map((item) => {
// Start loading image
const img = new Image();
img.src = item.dataset.src;
// Once image is loaded replace the src of the HTML element
img.onload = () => {
item.classList.remove('asyncImage');
return item.nodeName === 'IMG' ?
item.src = item.dataset.src :
item.style.backgroundImage = `url(${item.dataset.src})`;
};
});
})();
The javascript function scans the DOM for any ‘asyncImage’ class. After that, it will load all images that are provided in the data-src attribute on these elements. Once an image is loaded it will replace either the source of the image tag or the background image of not an IMG element.
<div class="asyncImage" data-src="/images/background.jpg">
...
</div>
or
<img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise">
Because the script removes the class of the element once the image has been changed, we can do some awesome CSS transitions if we want to. For example, an ease-in-out transition what will result in a fade once the image get’s replaced.
Conclusion
So what did we do? We improved our user experience, made our website load faster, made it more accessible for users without a fast connection and possibly improved our ranking in Google. That’s a big improvement for such a small change.
As you can see we load a placeholder image in 570ms. Once this is loaded the user sees the blurred low-resolution version of the original image. Once the original image is loaded it will replace the low-resolution image.
We don’t have any weird image rendering issues anymore and we give the user a fast first paint.
Lazy load images
When you want to improve your image loading process even further you might want to consider to lazy load your images.
Lazy loading is a technique where images not direct in the viewport of a user are not loaded. Once the image gets near the border of the viewport the image is loaded.
The benefit of this is fewer bytes to load on initial page load. Often not all images are necessary to be displayed in the viewport of the user. Once the user starts scrolling we need more and more content that can be loaded in. A good approach to implement this behavior is to take a look at the Intersection Observer.
I hope you enjoyed reading this article and are excited to implement this improvement yourself :). Some claps would mean a lot.Thanks to Martijn Schoenmaker.
ACF blenden Eigene Felder aus Editor aus
In functions.php folgende Zeile aufnehmen:
add_filter('acf/settings/remove_wp_meta_box', '__return_false');
Die wichtigsten URL und Dateipfad Funktionen für WordPress Theme Entwickler im Überblick
Veröffentlicht am 24. Januar 2017 von Thomas / Lesezeit: 4 Minuten
Als Einsteiger in die WordPress Theme Entwicklung können die vielfältigen Funktionen zur Rückgabe der Theme Ordner URL bzw. des Dateipfads am Anfang etwas verwirrend sein. In diesem Beitrag möchte ich deshalb einen Überblick über die verschiedenen URL und Pfad Funktionen in WordPress und ihre Verwendung geben.
Unterschied zwischen URL und Pfad
In WordPress gibt es sowohl Funktionen zur Rückgabe des absoluten Pfads zum Theme Ordner, als auch Funktionen zur Ausgabe der Theme Ordner URL. Beide Arten sind für Theme Entwickler wichtig.
Den absoluten Pfad kann man sich als lokalen Speicherort der Theme Dateien auf dem Webserver vorstellen (z.B. /home/user/public_html/wp-content/themes/). Dieser wird beispielsweise benötigt, um PHP Dateien im Theme zu laden und intern auf dem Server auszuführen.
JavaScript-, CSS- und Bild-Dateien werden üblicherweise mit der URL eingebunden (z.B. https://domain.com/wp-content/themes/), anstatt einen internen Pfad zu verwenden. Der Grund: Die Dateien werden nicht wie PHP Dateien auf dem Server verarbeitet, sondern von außen vom Browser geladen und von diesem verwendet.
WordPress URL und Pfad Funktionen im Überblick
WordPress hat vier Standard-Funktionen für die Rückgabe der Theme URL bzw. des Theme Pfads, welche sich seit Urzeiten (Version 1.5) im Core befinden.
get_stylesheet_directory und get_stylesheet_directory_uri
Die beiden get_stylesheet_directory Funktionen geben den Pfad/URL des derzeit aktivierten Themes der WordPress Installation zurück. Falls ein Child Theme verwendet wird, verweisen diese Funktionen damit auf den Ordner des Child Themes.
get_stylesheet_directory()
absoluter Pfad zum Child Theme Ordner
z.B. /home/user/public_html/wp-content/themes/child-theme
get_stylesheet_directory_uri()
URL zum Child Theme Ordner
z.B. https://domain.com/wp-content/themes/child-theme
get_template_directory und get_template_directory_uri
Die beiden get_template_directory Funktionen hingegen beziehen sich immer auf das Parent Theme.
get_template_directory()
absoluter Pfad zum Parent Theme Ordner
z.B. /home/user/public_html/wp-content/themes/parent-theme
get_template_directory_uri()
URL zum Parent Theme Ordner
z.B. https://domain.com/wp-content/themes/parent-theme
Anmerkung: In der WordPress Dokumentation ist manchmal auch die Rede von stylesheet directory und template directory. Mit Ersterem ist aufgrund der Funktionen der Ordner des Child Themes gemeint, mit Letzterem der Parent Theme Ordner.
Häufiges Problem: Verwendung eines Child Themes
Ohne Child Theme verweisen alle vier Funktionen auf den gleichen Ordner – den des aktuellen Themes. Es tauchen daher keine Fehler auf, egal ob get_template_directory oder get_stylesheet_directory bzw. deren URL Funktionen verwendet werden.
Häufig wird es erst dann problematisch, wenn ein Child Theme aktiviert wird.
Dann müssen die richtigen Funktionen verwendet werden, um die Dateien zu laden. Mit Verwendung der falschen Funktion wird womöglich auf den falschen Theme Ordner zurückgegriffen, in welchem die Dateien nicht existieren.
Anwendung der Funktionen im WordPress Theme
Wann welche Funktion verwendet wird ist immer situationsbedingt. Im Folgenden möchte ich die typischen Anwendungsfälle zeigen.
Laden von PHP Dateien
Die Funktionen eines WordPress Themes befinden sich in der functions.php. Die meisten Themes sind aber etwas umfangreicher und teilen Funktionen zur besseren Übersichtlichkeit in mehrere Dateien auf.
Deshalb werden in vielen Themes am Ende der functions.php noch weitere Dateien geladen.
require get_template_directory() . '/inc/template-tags.php';
require get_template_directory() . '/inc/customizer.php';CopyFür das Laden von PHP Dateien benötigen wir den absoluten Pfad, nicht die URL.
Die korrekte Einbindung der Dateien vom (Parent) Theme Ordner erhalten wir daher mit get_template_directory(). Damit funktioniert das Einbinden der Dateien auch noch, wenn Nutzer ein Child Theme erstellen. Mit der Funktion wird weiterhin im Parent Theme nach der Datei gesucht.
Falls du ein Child Theme erstellt und dort eine neue PHP Datei angelegt hast, welche geladen werden soll, musst du folglich get_stylesheet_directory() für die Rückgabe des Pfads des Child Theme Ordners verwenden.
require get_stylesheet_directory() . '/child-theme-options.php';CopyEs spielt übrigens keine Rolle, ob die Funktionen im Child oder Parent Theme verwendet werden. Der Unterschied zwischen Child & Parent bezieht sich auf den Rückgabewert der Funktionen, nicht in welchem Kontext diese ausgeführt werden.
Exkurs: Für das Laden von Template Dateien stellt WordPress extra Funktionen wie get_template_part() bereit, welche ich bald in einem extra Beitrag vorstellen möchte. Deshalb sollten nur Funktionsdateien auf diese hier beschriebene Weise eingebunden werden.
Einbinden von JavaScript und CSS Dateien
Für externe Dateien, die vom Browser geladen werden, verwenden wir analog die URI Funktionen. Typisch sind hier das Einbinden von JavaScript und CSS Dateien.
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css' );
CopyAuch hier nutzen wir wieder get_template_directory_uri, weil sich die entsprechenden JS und CSS Dateien im Parent Theme befinden. Häufig besteht ein Child Theme ja nur aus style.css, functions.php und wenigen Template Dateien.
Falls aber neue CSS und JS Dateien im Child Theme hinzugefügt werden, kann stattdessen die Funktion get_stylesheet_directory_uri verwendet werden.
Laden von Bildern
Zur Vollständigkeit halber erwähne ich auch noch das Laden von statischen Bildern, was ich persönlich eher selten in meinen Themes brauche. Ebenfalls wieder mit URL Funktion.
<img src="<?php echo get_template_directory_uri(); ?>/images/image.png" />CopySpezielle Funktion für die style.css
Für die Einbindung der style.css kennt WordPress noch eine spezielle Funktion: get_stylesheet_uri()
Diese verknüpft eigentlich nur get_stylesheet_directory() mit dem String /style.css. Trotzdem sollte immer die spezielle Funktion verwendet werden, weil diese den Filter stylesheet_uribereit stellt und damit Plugins Zugriff auf das Laden der style.css gibt.
wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );