WordPress News 10/22

Category // DOWN

Tags // DOWN, WordPress

Gesammelte Neuigkeiten, interessante Posts, empfehlenswerte Plugin und Themes aus Kalenderwoche 16/2022.

„Embed Privacy“ Plugin für WordPress – DSGVO und Performance

Inhalte, die von externen Seiten wie YouTube oder Twitter auf deiner Seite eingebettet sind, laden automatisch, wenn ein Besucher deine Seite aufruft. Embed Privacy verhindert das Laden dieser Inhalte, bis dein Besucher ausdrücklich zustimmt.

Aber Embed Privacy verbessert nicht nur die Datenweitergabe an Dritte, es macht deine Seite auch schneller, weil weniger Inhalte auf einmal aufgerufen werden müssen.

Die Platzhalter, die eingebettete Inhalte ersetzen, kannst du mit wenigen Zeilen CSS stylen, wie du möchtest.

Mit einem Klick auf den Platzhalter wird der entsprechende Inhalt nachgeladen und deine Besucher können zum Beispiel eingebundene Inhalte ansehen.

Text und Titelbild: https://epiph.yt/embed-privacy/

Obwohl meine externen Inhalte, hauptsächlich YouTube-Videos, bereits datenschutzkonform eingebunden sind (zum Beitrag) haben mich zwei drei Eigenschaften von Embed Privacy zur sofortigen Installation bewegt.

  1. Beiträge mit eingebetteten Videos werden schneller geladen.
  2. Funktioniert auch rückwirkend, also mit bereits bestehenden Inhalten!
  3. Simon Kraft ist daran maßgeblich beteiligt – ❤liche Grüße an das WordPress-Meetup Stuttgart

Codebeispiel YouTube Video

<div class="embed-privacy-container is-disabled embed-www-youtube-nocookie-com" id="oembed_d1c5c16908ba0ebe5883b9a436eb24a3" data-embed-provider="www-youtube-nocookie-com">
						<button class="embed-privacy-enable screen-reader-text">Inhalt von www.youtube-nocookie.com anzeigen</button>
			
			<div class="embed-privacy-overlay">
				<div class="embed-privacy-inner">
							<p>
		Hier klicken, um den Inhalt von www.youtube-nocookie.com anzuzeigen		</p>
					<p class="embed-privacy-input-wrapper">
				<input id="embed-privacy-store-www-youtube-nocookie-com-d1c5c16908ba0ebe5883b9a436eb24a3" type="checkbox" value="1" class="embed-privacy-input" data-embed-provider="www-youtube-nocookie-com">
				<label for="embed-privacy-store-www-youtube-nocookie-com-d1c5c16908ba0ebe5883b9a436eb24a3" class="embed-privacy-label" data-embed-provider="www-youtube-nocookie-com">
					Inhalt von www.youtube-nocookie.com immer anzeigen				</label>
			</p>
			
				</div>
				
				<div class="embed-privacy-footer"><span class="embed-privacy-url"><a href="https://www.youtube-nocookie.com/embed/11c3O6DRjqU">„YouTube video player“ direkt öffnen</a></span></div>
			</div>
			
			<div class="embed-privacy-content">
				<script>var _oembed_d1c5c16908ba0ebe5883b9a436eb24a3 = '{\"embed\":\"&lt;iframe loading=&quot;lazy&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https:\\/\\/www.youtube-nocookie.com\\/embed\\/11c3O6DRjqU&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;\\/iframe&gt;\"}';</script>
			</div>
			
			<style>
							</style>
		</div>

Im Vergleich dazu dasselbe, normal datenschutzkonform eingebettete Video:

<iframe loading="lazy" src="https://www.youtube-nocookie.com/embed/11c3O6DRjqU" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>

WordPress Plugin “Scriptless Social Sharing”

Scriptless Social Sharing ist ein kleines Plugin zum Hinzufügen von Schaltflächen zu Ihren Beiträgen/Seiten, um es Ihren Lesern zu erleichtern, Ihre Inhalte in sozialen Netzwerken zu teilen.

Die Freigabelinks verwenden die grundlegendsten Methoden, die von jedem Netzwerk bereitgestellt werden. In diesem Plugin ist kein JavaScript, nichts Ausgefallenes enthalten. Wenn Sie also Ausgefallenes wollen, ist dies nicht das Plugin, nach dem Sie suchen. Es baut nur eine Reihe von Links auf.

Die Schaltflächen zum Teilen sind zugänglich – selbst wenn Sie die Schaltflächenstile „Nur Symbole“ auswählen, sind die Netzwerknamen immer noch Teil der Schaltflächen, nur auf barrierefreie Weise ausgeblendet.

SSS

Dieser manuell eingefügte SSS-Block steht nur zur Verfügung, wenn in den Plugin-Einstellungen automatisch und manuell aktiviert wurde. In den Block-Einstellungen können auch die Standardeinstellungen überschrieben, und mehr, weniger oder andere Social Accounts angezeigt werden.

Die Einstellmöglichkeiten sind überschaubar und in unter 5 Minuten erledigt.

Schlanker Code mit SVG Icons

Als Fan von validem und strukturiertem HTML hätte ich mir die Ausgabe als „Liste“ gewünscht.

<h3 class="scriptlesssocialsharing__heading">Erzähl’s deinen Mädels:</h3>

<div class="scriptlesssocialsharing__buttons">

<a class="button twitter" target="_blank" href="https://twitter.com/intent/tweet?text=WordPress%20News%2010%2F22&amp;url=https%3A%2F%2Fduba-online.com%2F%3Fp%3D3197&amp;via=von_guenter&amp;related=von_guenter" rel="noopener noreferrer nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="scriptlesssocialsharing__icon twitter" fill="currentcolor" height="1em" width="1em" aria-hidden="true" focusable="false" role="img"><path d="yxz...123"></path></svg>
<span class="sss-name"><span class="screen-reader-text">Share on </span>Twitter</span></a>

<a class="button facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fduba-online.com%2F%3Fp%3D3197" rel="noopener noreferrer nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="scriptlesssocialsharing__icon facebook" fill="currentcolor" height="1em" width="1em" aria-hidden="true" focusable="false" role="img"><path d="yxz...123"></path></svg>
<span class="sss-name"><span class="screen-reader-text">Share on </span>Facebook</span></a>

<a class="button whatsapp" target="_blank" href="https://api.whatsapp.com/send?text=ausgeblendet" rel="noopener noreferrer nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="scriptlesssocialsharing__icon whatsapp" fill="currentcolor" height="1em" width="1em" aria-hidden="true" focusable="false" role="img"><path d="yxz...123"></path></svg>
<span class="sss-name"><span class="screen-reader-text">Share on </span>WhatsApp</span></a>

</div>

    Die mobile Version verlassen