Webmaster Tipps: Gestaltung und Programmierung (Seite 6)

Wenn Elemente im Header, Footer oder der Sidebar auf verschiedenen Seiten unterschiedliche Texte oder Bilder anzeigen sollen, ist es wichtig, zu wissen, welche Wordpress-Seite der Nutzer gerade aufgerufen hat. Das geht zum Beispiel über den in Wordpress angegebenen Namen der Seite, der auch als Permalink angezeigt wird: In PHP kann man damit über die Server-Variable $_SERVER["REQUEST_URI"] zugreifen: // Welche Seite wird angezeigt? $page_tit... Weiterlesen...

Mit dem neuen Wordpress 5 ist auch der neue Block-Editor "Gutenberg" zum Standard-Editor für die Beiträge und Seiten des Blogs geworden. Dieser ist für manche Nutzer praktisch, da sich Elemente jetzt einfacher als Block in den Text ziehen lassen. Wer trotzdem den klassischen Wordpress Editor, oder sogar den reinen Text-Editor, bevorzugt, kann den neuen Editor aber auch deaktivieren. Das geht aber nicht mehr über die User-Einstellungen: Dort lie�... Weiterlesen...

Mit Image-Maps ist es möglich, verschiedene Bereiche eines Bildes (Punkt, Vierecke und auch freie Elemente) klickbar zu machen: Neben dem Klick funktionieren aber auch onmouseover und onmouseout, um verschiedene Effekte zu realisieren und den Besucher mit der Grafik interagieren zu lassen. Für Responsive-Webseiten, bei der sich die Seite an das Bildformat des Anzeigegerätes anpasst und die Bilder dann teilweise skaliert werden, ist das aber nichts: D... Weiterlesen...

Wordpress Weiterlesen Tag: So macht erstellt man eine Vorschau mit Link zum Beitrag! Wer lange Wordpress-Beiträge schreibt, möchte diese oft nicht komplett auf der Start- oder Übersichtsseite anzeigen. Hier hilft es, mit "the_excerpt()" nur einen Teil des Beitrags anzuzeigen: Damit lässt sich dann die maximale Buchstabenanzahl vorgeben. Wer etwas freier sein möchte, kann aber auch selber den "Wordpress Weiterlesen Tag" einbauen: Damit kann man selb... Weiterlesen...

Mit PHP eigene Dateien oder Programm-Code in einem Wordpress-Beitrag einbauen: So geht's! Mit dem Content-Management-System Wordpress lassen sich schicke Webseiten gestalten, die später von anderen Nutzern mit weniger oder auch gänzlich ohne Programmierkenntnisse gepflegt werden können. Sollen komplexere Elemente aber in einem Wordpress Beitrag oder auf einer Seite eingebaut werden, kann das andere Nutzer schnell verwirren und zu unübersichtlich... Weiterlesen...

Im E-Commerce ist es gar nicht so einfach, einen direkten und möglichst persönlichen Kontakt zum Kunden zu halten. Die nahezu unbegrenzte Reichweite des Internets birgt viele Vorteile, bringt aber auch ein hohes Maß an Anonymität und Distanz mit sich. Um mit den Kunden besser in Kontakt zu kommen, setzen Unternehmen vielfach auf tagesaktuelle Präsenz im Social Media Bereich, insbesondere bei Facebook, Twitter oder Instagram. Hier sind die Komm... Weiterlesen...

Funktioniert wie die explode() Funktion in PHP: Auch mit JavaScript kann man einen String in mehrere Teile aufteilen, um einzelne Teile des Strings getrennt weiter zu verarbeiten. Das funktioniert, bis auf die Syntax, genau wie die explode() Funktion in PHP. Statt explode heißt der Befehl in Javascript allerdings split() und wird zum Aufruf direkt an den String angehängt. Anhand eines Trennzeichens wird der String dann aufgeteilt und die einzelnen Teile ... Weiterlesen...

Um mit JavaScript interaktive Webseiten zu gestalten, kommt es hin und wieder vor, die Eingaben eines Drop-Down Menüs auszulesen. Diese <select> Menüs enthalten mehrere Werte, die untereinander in einem ausklappbaren Menü angezeigt werden. Mit JavaScript kann man dabei aber nicht nur auf den Wert, sondern auch auf den Namen des ausgewählten <option> Eintrags zugreifen und diesen weiter verwenden!   So sieht es aus: Eins ... Weiterlesen...

Kreise mit CSS, ganz ohne Bilder? Das geht und passt sich so auch noch der Auflösung an! Mit CSS ist es nämlich ganz ohne Grafiken möglich, einfache Elemente zu zeichnen. Rechteckige Boxen sind dabei sehr einfach, runde Formen etwas aufwendiger - aber nicht viel. Durch die Eigenschaft "border-radius" lässt sich einem eckigen Element eine runde Ecke hinzufügen. Nimmt man jetzt einen sehr großen "border-radius" an allen vier Seiten des Elements, erh... Weiterlesen...

Mit float lassen sich mit CSS mehrere Elemente nebeneinander anzeigen: Reicht der Platz aus, wird ein "float:left" Element neben einem anderen Element mit der Eigenschaft "float:left" angezeigt. Trotzdem ist es nicht ganz einfach, verschiedene floating-Elemente zu platzieren - vor allem, wenn sie auch noch zentriert werden sollen.   display: flex - DIVs flexibel und zentriert nebeneinander Die neue CSS Eigenschaft "display: flex" hilft hier au... Weiterlesen...

Wer diese Fehlermeldung bei der Verwendung von Javascript bekommt, muss eigentlich nicht viel ändern, um das Skript ausführen zu können: Man muss nur den angemahnten "unescaped line break" entfernen: Anders als zum Beispiel PHP hat Javascript nämlich Probleme, wenn ein String über mehrere Zeilen gehen soll.   SyntaxError: '' string literal contains an unescaped line break Die Fehlermeldung gibt daher an, dass ein "line break", ei... Weiterlesen...

Tipp: So sieht das Bild ohne CSS Filter aus! Für manche Effekte braucht man kein Bildbearbeitungsprogramm: Mit den CSS Filtern können die Browser viele Effekte selber darstellen - und das, ohne das ursprüngliche Bild zu verändern. Einer dieser Effekte ist der grayscale Filter: Damit wird aus einem bunten Bild eine schicke schwarz-weiß Grafik. Das einfärben des Bildes funktioniert dabei nicht nur mit Bildern, die direkt (als <img>) ein... Weiterlesen...

Mit Javascript lassen sich die CSS Werte eines Elements nicht nur auslesen, sondern auch setzen: So kann man mit Javascript etwa dynamisch Elemente in der Größe verändern oder neu platzieren. Damit das funktioniert, muss man auf die Werte aber auch zugreifen können. Ganz wichtig ist dabei die ID des Objektes (in unserem Beispiel einfach ein DIV). Über dessen ID (die auf der gesamten HTML-Seite nur einmal vorhanden sein darf) lassen sich die Werte a... Weiterlesen...

Für Responsive-Webseiten, die nicht nur in großer Auflösung auf dem Desktop-Rechner, sondern auch auf dem Tablet oder Handy gut aussehen, muss man oft bestimmte Elemente in der Größe an das Webseiten-Fenster (oder die verfügbare Bildschirmbreite) anpassen. Das geht mit CSS sehr leicht: Hier zeigen wir zum Beispiel, wie man mit CSS ein Bild immer automatisch mitskaliert). Zum Beispiel: So sieht es aus! Das richtet sich allerdings immer nur n... Weiterlesen...

Mit CSS lassen sich Bilder ganz einfach an die Größe des Browserfenster anpassen - sogar automatisch, wenn es sich verkleinert oder vergrößert. Aber zusätzlich funktioniert dieser Trick auch für Responsive-Webseiten, damit die Bilder nicht nur auf dem Desktop, sondern auch auf mobilen Webseiten in der vollen Breite angezeigt werden, ohne dass wichtige Informationen abgeschnitten werden. Beispiel: So sieht es aus! Für die automatische Grö�... Weiterlesen...