Der folgende Code sorgt dafür, dass WP die IP Adresse bei Kommentaren nicht mehr speichert:

<?php 
function wp_no_comments_ip( $comment_author_ip ) { return ''; } add_filter( 'pre_comment_user_ip', 'wp_no_comments_ip' );
?>

The post WordPress davon abhhalten die IP Adresse bei Kommentaren zu speichern appeared first on Tino-Designs.com.

// Fügt die Funktion dem Standard WP Kommentar sowie dem Woocommerce Review Formular hinzu
function add_privacy_field_on_comment_form() {
   $req  = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
        echo '<div class="comment-form-datenschutz"><input id="datenschutz" class="my-class" name="datenschutz" type="checkbox"' . $aria_req . ' />' .
	'<label class="my-class" for="datenschutz">' . __( 'Mit der Nutzung dieses Formulars erklären Sie sich mit der Speicherung und Verarbeitung Ihrer Daten durch diese Website einverstanden. Des weiteren geben Sie uns die Einwilligung zur Veröffentlichung Ihres Kommentars und akzeptieren unsere <a target="_blank" href="/datenschutz">Datenschutzerklärung.</a>' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label></div>';
    }
    add_action( 'comment_form_logged_in_after', 'add_privacy_field_on_comment_form' );
    add_action( 'comment_form_after_fields', 'add_privacy_field_on_comment_form' );


//Prüft ob die Checkbock für den Datenschutz ausgewählt wurde 
add_filter( 'preprocess_comment', 'webshaped_verify_comment_meta_data' );
function webshaped_verify_comment_meta_data( $commentdata ) {
	// Wenn die Checkbox leer ist und ein Gastnutzer schreiben möchte...
	if ( empty( $_POST['datenschutz'] ) ) {
		// ... zeige folgenden Fehlertext an
		wp_die( __( '<strong>FEHLER</strong>: Die Datenschutzbox wurde nicht akzeptiert.<br><br><a href="javascript:history.back()">« Zurück</a>' ) );
	}
	return $commentdata;
}

The post Datenschutz Checkbox für Wordpress Kommentare und Woocommerce Reviews appeared first on Tino-Designs.com.

Google bietet die Google Search Console an, um auf bestimmte Metriken hinzuweisen, die nach Ansicht von Google verbessert werden sollten. Eine dieser Metriken, die häufig vorkommen, heißt LCP. Largest contentful paint.

LCP-Metriken messen die Renderzeit des größten Bild- oder Textblocks, der im Darstellungsbereich sichtbar ist. Also im Grunde das größte Element „above the fold“. Das ist ziemlich oft ein Bild, besonders bei Blogposts oder anderen inhaltsreichen Seiten.

Das Problem hier ist, dass WordPress ab Version 5.4 damit begann, alle Bilder der Seite per „Lazy Load“ zu laden. Es handelt sich um eine Standardfunktion, die eine große Verbesserung darstellt. In diesem Fall wäre es jedoch besser, wenn das erste Bild des Inhalts nicht per Lazy Load geladen würde. Vor allem, wenn Ihre Website das erste Bild über dem Inhalt und damit sofort sichtbar „above the fold“ anzeigt.

Der Grund dafür ist, dass Bilder, die verzögert geladen werden, etwas langsamer geladen werden. Daher ist der LCP-Score oft viel schlechter als er sein könnte. Googles Pagespeed Insights schlägt tatsächlich vor, dass LCP BIlder nicht per Lazy Loading geladen werden sollten.

Da ich dieses Problem schon für mehrere Kunden hatte, habe ich mir einen einfachen Code zusammengestellt, der in die functions.php Ihres Wordpress-Themes eingefügt werden kann.

//function to get first image in post content area
function get_first_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img[^>]*src="([^"]+)"/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

   //defines a default image if no image was found
    if(empty($first_img)){ 
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

// disable lazy loading for first image inside post content
function no_lazy_load_on_first_image( $value, $image, $context ) {
if ( 'the_content' === $context ) {

//uses above function to check if image is the first image of the content area
$image_url = get_first_image();

if ( false !== strpos( $image, '' . $image_url . '' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_on_first_image', 10, 3);

Dieser Code verwendet tatsächlich zwei Funktionen und den WP-Filter „wp_img_tag_add_loading_attr“. Mit diesem Filter können wir ändern, wie Lazy Loading hinzugefügt wird.

Die erste Funktion findet das erste Bild innerhalb des aktuellen Beitragsinhalts. Die zweite Funktion überprüft einfach, ob das das Bild ist, das der Filter gerade durchläuft. Wenn dies der Fall ist, wird statt des regulären Werts false zurückgegeben.

Gerne könnt ihr den Code unten, verbessern, korrigieren und kommentieren.

The post Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert appeared first on Tino-Designs.com.

• Computer oder Laptop zum Erstellen der Seite
• Editor, IDE oder WYSIWYG Editor
• Grundkentnisse in HTML
• Browser
• Server/Hosting mit Domain
• FTP Software

Eine moderene Webseite besteht zudem aus mehreren zusätzlichen Komponenten, wir CMS, HTML mit CSS, PHP und meist auch einer Datenbank mit SQL Abfragen (z.B. MySQL) um die Webseite interaktiv gestalten zu können.

Ich will mich hier aber auf die absoluten Grundlagen konzentrieren um das Thema einfacher zu Gestalten und am Ende besser verstehen zu können.

Computer oder Laptop zum Erstellen der Seite

Hier reicht ein einfacher Laptop der auch für Office Anwednungen genutzt werden kann. Ich persönlich arbeite lieber an einem großen Bildschirm und einem Rechner mit lieber etwas zu viel, als zu wenig Leistung. Das macht das Arbeiten an sich einfach leichter, weil der Rechner nicht so schnell an seine Überlastungsgrenze kommt und generell schneller arbeitet.

Editor, IDE oder WYSIWYG Editor

Eine Webseite ist im Grunde nichts anderes als eine ganz einfache Textdatei mit der Endung .htm/.html. Um diese zu bearbeiten reicht es vollkommen aus, einen ganz einfachen Texteditor zu nutzen, z.B. Notepad oder Editor von Windows. Für größere Arbeiten besser geeignet sind allerdings Editoren, die auch HTML erkennen und deren Befehle entsprechend formatiert darstellen. Atom ist z.B. dafür sehr gut geeignet.

Es gibt dann noch sogenannte IDEs. IDE steht für Integrated Development Environment, auf Deutsch, Integrierte Entwicklungsumgebung. Ein bekanntes Open Source IDE ist z.B. NetBeans. Diese Programme sind sehr Umfangreich, unterstützen mehrere Programmiersprachen und haben einige Features um das Programmieren, vor allem von größeren Projekten, zu vereinfachen.

Dann gibt es noch sogenannte WYSIWYG Editoren. WYSIWYG steht für, What You See Is What You Get, auf Deutsch, was du siehst ist was du bekommst. Das sind Editoren in denen man eine Webseite rein grafisch erstellen kann, ähnlich wie Dokumente in MS Word oder LibreOffice Writer. Man muss das HTML nicht selbst bearbeiten. Hört sich klasse an, funktioniert aber in der Praxis, aus verschiedenen Gründen nicht immer wirklich gut und zuverlässig.

MS Office oder andere Textverarbeitungsprogramme sind übrigens nicht geeignet. Man kann die erstellten Dokumente zwar auch als HTML Dateien abspeichern, die Darstellung lässt allerdings zu Wünschen übrig.

Grundkentnisse in HTML

Was in die .html Datei dann geschrieben wird nennt man, HTML, Hyper Text Markup Language. auf Deutsch, Hypertext Auszeichnungssprache. Wenn man diese Datei dann in einem Browser öffnet, werden die Elemente und Tags von HTML, vom Browser interpretiert, der dann die Inhalte dementsprechend darstellt.

Ein ganz einfaches Grundgerüst für eine HTML Datei sieht folgerndermaßen aus:

<!DOCTYPE html>
<html>
  <head>
    <title>Titel der Webseite</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
    <!-- Dies ist ein Kommentar. Kommentare werden im Browser nicht angezeigt. -->
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Diesen HTML Quellcode, könnt ihr z.B. einfach kopierne und in eine einfache Textdatei einfügen. Die Dateiendung dann auf .html abändern und das ganze in euerem Browser öffnen. Da seht ihr dann – Hello World! – stehen. Voilá, das ist eure erste Webseite :).

Browser

Der Browser ist besonders wichtig, denn ohne kann man nicht überprüfen wie die Webseite oder Änderungen der Webseite wirklich aussehen. Browser interpretieren HTML zum Teil unterschiedlich, wer aber mit Mozilla Firefox oder Google Chrome arbeitet, bekommt relativ wenig Probleme. Webdesigner und Entwickler haben meist eine gnaze Palette an Browsern installiert. Microsoft Edge, Firefox, Chrome und Opera sind die bekanntesten.

Früher gab es noch Netscape Navigator und den guten alten Internet Explorer, der tatsächlich sehr oft HTML falsch oder einfach anders als die anderen Browser interpretiert hat.

Server/Hosting mit Domain

Ok jetzt haben wir also unsere erste kleine „Hello World!“ Webseite. Wie bekommen wir diese allerdings ins Internet, so dass diese auch meine Freunde und Kollegen anschauen können.

Dafür benötigt man Webhosting, angeboten von einem Webhoster. Hostinganbieter machen im Grunde nichts anderes als Speicherplatz, auf deren Server, zu vermieten. Ein Server ist im Grunde nichts anderes als ein Computer der ständig mit dem Internet verbunden ist und natürlich auch dafür optimiert ist Webseiten anzuzeigen.

Man bekommt vom Webhosting Anbieter neben dem Speicherplatz für die Webseite (Webspace) außerdem eine Domain unter welcher der Speicherplatz im Internet zu finden ist. Dies kann eine eigene Domain sein, wenn diese aber noch nicht vorhanden ist bekommt man meist eine etwas kompliziertere Internetadresse, z.B. http://meinekundennummer.webhoster.serverxy.com. Diese Internetadresse wird dann im Browser eingegeben und man deinen Webspace sehen.

Eine eigene Domain ist da natürlich schöner. Diese bekommt man vom Webhoster im Paket oder man muss sie zusätzlich dazubestellen. Die Preise variieren von ca. 10,-€ bis 40,- € im Jahr je nach Domainendung kann es auch mal mehr werden.

Vom Webhoster bekommt man dann Zugangsdaten um sich dort einzuloggen und Dateien der Webseite auf den eigenen Webspace hochzuladen. Dies macht man mit dem sogenannten File Transfer Protokoll.

FTP Software

FTP steht für File Transfer Protokoll, auf Deutsch, Dateiübertragungsprotokoll und ist eine Schnittstelle um Dateien vom eigenen Computer auf einen mit dem Internet verbundenen Server zu übertragen.

Vom Webhoster bekommt man hierfür Zugangsdaten. Diese gibt man im FTP Programm ein und dann bekommt man eine Dateiübersicht ähnlich wie auf der eigenen Festplatte im Explorer. Nur ist die Übersicht jetzt nicht die eigene Festplatte sondern die des Webspaces.

Die meisten FTP Programme zeigen Standardmäßig den eigenen Rechner links und den Server rechts an. Per Doppelklick, oder Drag and Drop mit der Maus, lassen sich Dateien nun ganz einfach auf dem Server ablegen, überschreiben oder herunterladen.

Das aktuell bekannteste FTP Programm ist FileZilla. Es ist Open Source, kostenlos und erhält regelmäßige Updates.

Sobald man nun die Dateien vom lokalen Rechner per FTP auf den Server hochgeladen hat, sind diese auch unter der eigenen Domain bzw. der von Hoster zur verfügung gestellten Internetadresse abrufbar. Online ist eure erste Webseite :).

Wichtig: Die erste HTML Datei die in einem Ordner oder der Domain der Webseite aufgerufen wird, ist fast immer, wenn nicht anders auf dem Server konfiguriert, die Datei mit dem Namen index.html. D.h. wenn ihr eine Webseite erstellt, dann muss der Dateiname der Startseite der Webseite index.html sein.

Wenn euch die kleine Einführung gefallen hat, dann lasst doch einen Kommentar da. Ich würde mich freuen

The post Was wird benötigt um eine Webseite zu erstellen? appeared first on Tino-Designs.com.

Photoshop kennt jeder, zumindest den Begriff. Adobe, die Firma hinter der Bildbearbeitungssoftware, hat damit schon vor Jahrzehnten den Standard in der Branche gesetzt. Was ursprünglich zur Bild- und Photobearbeitung entwickelt wurde ist mittlerweile weitaus mehr und dient neben Fotografen, auch Grafikern, Druckereien, digitalen Künstlern, Webdesignern und mehr, als absolut unverzichtbares Werkzeug. Der Umfang, die Möglichkeiten, von und mit Photoshop, sind mittlerweile gefühlt grenzenlos wenn es um Bild und Grafik geht. Das hat seinen Preis. Was früher noch im 4-stelligen Bereich mit einer einmaligen Zahlung erworben werden konnte, gibt es mittlerweile nur noch als Abo. Die Kosten sind jeden Monat fällig, auch für den kleinen Unternehmer oder Hobbykünstler, der sich evtl. nur 1 bis 2 mal im Monat an das Programm setzt.

ausgedient

Alternativen gibt es. Naja, sagen wir es gibt sie, nur eben nicht annähernd mit den Möglichkeiten und Funktionen wie es Photoshop bietet. Echte Alternativen gibt es also nur bedingt und kostenlose noch viel weniger. Eigentlich keine, dachte ich bis vor ein paar Jahren auch noch.

Allerdings möchte ich euch hier eine Software vorstellen die sehr nah dran kommt und auch für Profis eine absolute Überlegung wert ist. Die Software beobachte ich mittlerweile seit einigen Jahren und die Entwicklung hat mich nicht enttäuscht, im Gegenteil. Ich bin begeistert und nutze für meine Grafik und Bildarbeiten fast nur noch dieses kostenlose Open Source Programm. Neben meiner uralten Version von Photoshop (CS 1, Versionsnummer 8.0, aus dem Jahr 2003), die ich mittlerweile so gut kenne, und immer noch tut was sie soll, dass ich damit in vielen Dingen einfach am schnellsten Arbeiten kann.

Jedoch hat das fast 20 Jahre alte Programm in einigen Bereichen einfach ausgedient und aus Kostengründen, sowie meiner Überzeugung von Open Source Software, ist es bei mir nie zu einem Upgrade gekommen. Dazu muss ich sagen, dass sie für mich als Webdesigner und Grafiker völlig ausreichend war, zumindest bis vor zwei bis drei Jahren noch, als ich mich dann doch auf die Suche nach einer Alternative machte. Das Original war schlicht und einfach zu teuer, und ein Freund von Abos bin ich aufgrund der laufenden Kosten überhaupt nicht. Erst recht nicht wenn Photoshop als Webdesigner nicht mein Hauptwerkzeug ist.

Alternativen

Eine gute Alternative musste also her. Gefunden habe ich erst mal nichts. zumindest nichts was wirklich stabil läuft, einigermaßen ähnlich wie Photoshop aufgebaut ist, so dass ich nicht erst eine Einlernphase von mehreren Monaten brauche und nichts kostet oder zumindest bezahlbar ist.

GIMP war bekannt, ist relativ stabil, aber funktioniert aus meiner Sicht einfach anders als Photoshop und ist sehr gewöhnungsbedürftig. Dann gab es ein paar bezahlbare Alternativen, aber dort hat mich wieder immer ein fehlendes Feature gestört oder die Tatsache, dass es nur auf dem MAC erhältlich ist oder nur auf Windows läuft. Linux? Wurde nicht mal erwähnt, auch wenn Linux mittlerweile nicht nur den Webservermarkt beherrscht.

aller Anfang ist schwer

Ein Programm viel mir dann aber doch auf und ich habe es getestet. Erfolglos. Was heute mein fast einziges Programm in Sachen Druck, Bild-, und Grafikbearbeitung ist, war vor ein paar Jahren noch so instabil, dass ich mich nicht getraut habe etwas professionelles darin zu erstellen. Es ist einfach ständig abgestürzt, hängen geblieben oder war so verdammt langsam, dass eine normale Nutzung einfach nicht möglich war. Oft saß ich da und wünschte mir einfach nur die Features problemlos nutzen zu können. Sie überstiegen vor Jahren schon was mein altes Photoshop konnte.

Nun, das war vor ein paar Jahren. Und das Programm mit der damaligen Versionsnummer 3.+ ist spätesten mit Version 4.+ erwachsen und stabil geworden. Sehr stabil. Das Entwicklerteam macht einen super Job eine Open Source Software zu erstellen, mit Features die zum Teil sogar von Adobe kopiert und in Photoshop eingebaut werden. Mittlerweile ist Version 5.+ veröffentlicht.

Krita bekommt den Zuschlag

Darf ich vorstellen, Krita. Das professionelle und kostenlose Open Source Malprogramm.

Zugegeben, es ist keine Kopie von Photoshop und die Werkzeuge funktionieren zum Teil anders und auch die Shortcuts sind anders belegt. Macht es das zu einer schlechten Alternative? Oh nein!

andere Herkunft

Krita kommt aus dem Bereich für digitales Malen und digitale Kunst. Hat mittlerweile aber einen Funktionsumfang in den Bereichen Illustration, Bildbearbeitung, und Druckmedien, die vollkommen ausreichen dieses Programm dafür professionell zu nutzen.

Währenddessen kommt Photoshop ursprünglich aus dem Bereich der Bildbearbeitung. Aber jeder Grafiker und digitale Künstler weiß, dass Photoshop auch für diese Bereiche die unangefochtene Nummer eins ist. Digitale Zeichnungen und manuelle Renderings sind in Photoshop gang und gäbe auch wenn das Programm ursprünglich für Bildbearbeitung entwickelt wurde.

Top Entwickler

Ähnlich verhält es sich mit Krita und der Bildbearbeitung. Sehr erfreut war ich als das Programm ab Version 4.+ endlich ohne Probleme startete und alle Features problemlos genutzt werden konnten. Nicht ohne Grund. Das Entwicklerteam von Krita hat alleine von 2020 bis Ende 2021 14 Releases veröffentlicht. Dabei in jedem Release Bugfixes ohne Ende. Die Stabilität der Software auf allen drei großen Betriebssystemen (Windows, Macintosh und Linux), stand, und steht immer noch, an oberster Stelle.

Dazu kommen neue, zum Teil sehr innovative Features. Der Funktionsumfang übersteigt meine altes Photoshop bei weitem. Zugegeben ein Programm aus dem Jahr 2003 ist einfach veraltet und das neue Photoshop in vielen Belangen wohl immer noch bei weitem besser. Aber bei allen? Auf keinen Fall. Wer gern auch mal mit dem Stylus Pen zeichnet wird beeindruckt sein von den Möglichkeiten und Brushes in Krita. Gibt es Bildbearbeitungstools und Filter? Ohne Ende. Selbst PSD Dateien können geöffnet und bearbeitet werden. Auch wenn die Kompatibilität hier nicht immer 100% ist, geht Krita den Weg für offene Systeme und Dateiarten, anstatt zu versuchen das eigene Format (.kra) in der digitalen Kunst als Standard zu positionieren. Immerhin handelt es sich um ein Open Source Programm, dass mit Spenden weiterentwickelt wird. Möglichst viel Transparenz bringt auf Dauer mehr, ist hier Teil der Philosophie.

Fazit

Wer eine kostenlose Photoshop Alternative sucht, bereit ist etwas Zeit zum einlernen einzuplanen und keinen Photoshop Klon benötigt. Ist mit Krita sehr sehr gut bedient.

Auch wer Künstler, Fotograf oder Designer ist und die ein oder andere Möglichkeit, das ein oder andere Feature, bei Photoshop vermisst, oder ein zusätzliches Werkzeug mit weiteren Möglichkeiten ausprobieren möchte, ist bei KRITA genau richtig.

Die Software gibt es kostenlos unter krita.org für Mac, Windows und Linux.

The post Echte kostenlose Alternative zu Photoshop appeared first on Tino-Designs.com.

Das Template basiert auf W3.css und kann frei verwendet werden. Das Bild kann leicht ausgetauscht werden, daher passt es zu fast jedem anderen Design oder jeder anderen Website.

Live Vorschau | Download (zip)

The post Full Cover, responsives HTML Template appeared first on Tino-Designs.com.

Viel Spass beim nutzen, ich würde mich über einen Kommentar freuen.
Bei kommerzieller Nutzung bitte auch kurz Kontakt aufnehmen.

Dankeschön ich bin gespannt ob sie euch gefallen und welches euer Favorit ist. Bei mir ist es aktuell das dunkle.

The post Linux (Ubuntu) Wallpaper appeared first on Tino-Designs.com.