Hallo @RoyBlunk,

ich erstelle Designthemen und Plugins für WordPress. Daher schreibe ich Code in HTML, CSS, JS, jQuery, PHP und MySQL.

Deshalb verwende ich die folgenden Werkzeuge:

1) WampServer stellt mir einen lokalen Server mit MySQL und PHP zur Verfügung.

2) SCSS vereinfacht den Code, strukturiert ihn mithilfe von Konstanten und Funktionen und ermöglicht das Speichern von Boilerplate-Lösungen.

3) Gulp führt automatisch alle Routineoperationen mit den bearbeiteten Dateien aus:

• SCSS to CSS konvertieren
• auto prefixes für CSS-Eigenschaften hinzufügen
• die Fehlern in JS suchen
• JS-Dateien gemäß Styleguide bearbeiten 
• JS und CSS Dateien minimieren
• neue Dateien auf den lokalen Host kopieren
• die Webseite im Browser aktualisieren.

4) Ich benutze auch GitHub oder Bitbucket, um meine Arbeit zu speichern und mit Kollegen zu teilen. Und Sourcetree passt zu mir, um mit beiden Git-Diensten zu arbeiten.

5) Ich habe lange in Notepad++ gearbeitet, weil es schnell ist und viele Optionen wie Emmet oder Macrosen hat. Aber jetzt verwende ich Visual Studio Code, um meine Tools zu modernisieren.

6) Ich benutze oft Bootstrap als Framework und für Karussells bevorzuge ich Owl Carousel.

Für die Zukunft plane ich React.js, weil viele interessante Projekte dies benötigen. Und ich möchte das Testen automatisieren, also beherrsche ich Docker und Composer.

Ich schlage diese Version des Codes vor. Was halten Sie davon?
https://gist.github.com/glebkema/06501bc196aa48d4639fcba628a0fee9

$queries: ( 
 ( 'xs', 400, 4 ),
 ( 'sm', 550, 6 ),
 ( 'md', 750, 8 ),
 ( 'lg', 1000, 10 ),
 ( 'xl', 1200, 12 )
);

@each $prefix, $media, $columns in $queries {
 @media screen and ( min-width: $media + px) {
  @for $i from 1 through $columns {
   .col-#{$prefix}-#{$i} {
    flex: 0 0 100% / $columns * $i
   }
  }
 }
}

Das Ergebnis können Sie im obigen Link sehen.

-----

P. S. "Sass Maps vs. Nested Lists"

Standardmäßig verwendet WAMP die MariaDB. Und WordPress sucht derzeit nach MySQL.

1. Stellen Sie sicher, dass Sie MySQL installieren.
2. Schalten Sie den WAMP-Server im Menü von MariaDB auf MySQL um.

Details in Englisch:
"How to switch from MariaDB to MySQL in WAMP server?"

Dieser Artikel beschreibt, wie es möglich ist, nur eine oder mehrere Seiten aus Wordpress zu exportieren:
"Export WordPress Pages Either One-By-One, Or Several At A Time".

1. Erstellen Sie einen neuen Benutzer mit der Berechtigung "Autor".
2. Legen Sie es als Autor für die Seiten fest, die Sie exportieren möchten. Dies geschieht zweckmäßigerweise mit der sogenannten "Bulk-Aktion".
3. Wählen Sie diesen Autor beim Export aus.
4. Importieren Sie die resultierende XML-Datei in eine andere WordPress-Website.

Details und Screenshots finden Sie unter dem obigen Link.

Nicht jeder Browser kann als favicon verwenden:
https://caniuse.com/#feat=link-icon-svg

Für mich funktioniert Ihr Code in Chrome gut:

P.S. Auch spricht dieser Artikel über interessante Tricks, die mit SVG-Favicon ausgeführt werden können:
SVG, Favicons, and All the Fun Things We Can Do With Them

Sobald Sie Wordpress auf dem Hosting installiert haben, erhalten Sie sowohl eine Website als auch ein Admin-Panel, um Ihre Website einzurichten und Nachrichten und andere Materialien darauf zu veröffentlichen.

Es wird jedoch empfohlen, Ihre Website vor Suchmaschinen zu verbergen, bis alle Materialien fertig sind. Im Admin-Bereich gibt es hierfür eine spezielle Option, eine zuverlässigere Option ist jedoch die Verwendung des Plugins.

Zum Beispiel: https://wordpress.org/plugins/maintenance/

"autosize.js" ist das Beste für diese Aufgabe.
Dieses Skript ist klein und gut gemacht.
http://www.jacklmoore.com/autosize

Sie können dieses Skript über CDN verbinden, wenn Sie möchten:: https://cdnjs.com/libraries/autosize.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>

Und dann:

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

Überprüfen Sie die Faktoren, die die Wirkung der z-index Eigenschaft beeinflussen:

1) Der Z-index betrifft nur HTML-Blöcke, deren die position Eigenschaft auf "absolute", "relativ" oder "fixed" festgelegt ist.

2) Wenn zwei Blöcke denselben Z-Index haben, wird derjenige, der später in HTML beschrieben wird, oben platziert.

3) Der Z-Index vergleicht Blöcke, die sich in der Struktur eines HTML-Layouts auf derselben Ebene befinden. Wenn daher ein Block in einem anderen Block liegt, kann der Z-Index des übergeordneten Blocks wichtiger sein.

4) Der Initialwert für "z-index" ist "auto". Wenn der Block jedoch auf "opacity" von weniger als 1 eingestellt ist, zeichnet der Browser ihn als eigenständigen Block mit "z-index: 0". (Erläuterung auf StackOverflow)

Wenn wir uns zum Beispiel dieses Layout ansehen:

<header style="position: fixed; top: 0; left: 0; right: 0;">
	<nav>Menü</nav>
</header>
<main>
	<img src="image.jpg" alt="Bild">
</main>

dann wird das Bild dem Menü überlagert:

• wenn das <main>-Tag die Eigenschaft "position: relativ;" erhält;
• oder wenn das <img>-Tag die Eigenschaft "opacity: 0,9;" erhält.

Um dies später zu beheben, ist es sinnlos, einen z-index für das <nav>-Tag hinzuzufügen. Fügen Sie stattdessen einen z-index mit einem positiven Wert für das <header>-Tag hinzu.

Sie können auch zwei oder mehr Hintergründe mithilfe der Eigenschaft "background-image" festlegen, wenn Sie sie wie folgt durch Kommas getrennt auflisten:

background-image: url(Name.png), url(Name.gif);

Die Eigenschaft "background-attachment" ist standardmäßig "scroll". Somit können Sie diesen Teil der Anweisung löschen.

Wenn Sie für jeden Hintergrund unterschiedliche Werte für die "background-attachment"-Eigenschaft festlegen wollen, können Sie diese auch mit einem Komma auflisten. Zum Beispiel:

background-attachment: scroll, fixed;

Außerdem können Sie die Eigenschaft "background" benützen, alle Eigenschaften in einem langen Wert festzulegen:

https://developer.mozilla.org/de/docs/Web/CSS/background

background: url(Name.png) scroll, url(Name.gif) fixed;

So kann Ihr Code folgendermaßen umgeschrieben werden:

<body id="overlay" style="background-image: url(Name.png), url(Name.gif); height: 100vh; padding: 0; margin: 0;">
</body>

Ich möchte auch darauf hinweisen, dass es oft bequemer ist, "min-height: 100vh;" anstelle von "height: 100vh;" zu verwenden. Dann kann sich das <body>-Tag in der Höhe dehnen, wenn sich viel Inhalt darin befindet und das Smartphone horizontal gedreht wird.

Sie können die jQuery-Methode text() verwenden, um den Text des HTML-Blocks ohne HTML-Markup abzurufen.

• https://api.jquery.com/text/#text1
• https://www.w3schools.com/jquery/html_text.asp

Zum Beispiel:

<!doctype html>
<html lang="de">
<head>
	<title>Text</title>
</head>
<body>
	<div id="content">
		<h1>Überschrift.</h1>
		<p>Erster Absatz <b>mit fettem Text</b>.</p>
		<p>Zweiter Absatz <a href="#">mit einem Link</a>.</p>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
		var text = $('#content').text();
		console.log(text);
	});
	</script>
</body>
</html>

Infolgedessen wird der AAA-Variablen der folgende Text zugewiesen:

Überschrift.
Erster Absatz mit fettem Text.
Zweiter Absatz mit einem Link.

Das window-Objekt ist kein Befehl zum Öffnen eines Popup-Fensters, sondern ein globales Objekt, das eine Website darstellt.

• https://www.w3schools.com/jsref/obj_window.asp
• https://developer.mozilla.org/de/docs/Web/API/Window

Das  window-Objekt repräsentiert ein Fenster, das ein DOM Dokument enthält.

setTimeout() ist eine Methode, mit der die Ausführung einer bestimmten Funktion nach einer bestimmten Anzahl von Millisekunden gestartet wird.

• https://www.w3schools.com/jsref/met_win_settimeout.asp
• https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Die von setTimeout() gestartete Funktion kann verschiedene Aufgaben ausführen. Beispielsweise kann ein Popup geöffnet oder etwas auf der Seite oder etwas anderes aktualisiert werden.

var timeoutID = window.setTimeout(myFunction, 2000);

function myFunction() {
  alert('Zeit ist um!');
}

Vielleicht ist einer dieser Links für Sie hilfreich:

• Datenschutz-Generator Schweiz
• Datenschutzerklärung Schweiz (Muster Vorlage) gratis

Die Spieleentwicklung umfasst Arbeiten in verschiedenen Bereichen:

• Spielprozess
• Design
• Monetarisierung von Verkäufen
• Erstellung von Spieleservern
• technischer Support
• tatsächlich verschiedene Teile des Spiels programmieren

Darüber hinaus impliziert die Programmierung von Spielen eine Affäre mit den technischen Anforderungen, die bei der Herstellung von Spielen gestellt werden:

• schnelle Grafikverarbeitung
• Interaktion zwischen Spielern über das Internet
• und so weiter.

Figma :-)

• https://www.figma.com/
• https://usersnap.com/de/blog/figma/

Sie müssen zuerst die PHP-Datei mit include in die Datei für die Seite aufnehmen und dann die Funktionen aus dieser Datei verwenden.

https://www.php.net/manual/de/function.include.php

Zum Beispiel:

my_api.php:

<?php

function echo_h1( $text = "H1 Text." ) {
  echo "<h1>$text</h1>";
}

function echo_h2( $text = "H2 Text." ) {
  echo "<h2>$text</h2>";
}

my_page.php:

<?php
include "my_api.php";
?>
<div class="content">
  <?php echo_h1(); ?>
  <?php echo_h2( "New H2 text." ); ?>
</div>

1) Es scheint, als würde zufälliger Code auf folgende Weise erstellt:

1. Das Programm erhält eine zufällige 9-stellige Nummer.
2. Dann wählt er die Position in dieser Nummer, um zu beginnen.
3. Und nimmt die nächsten 3 Ziffern als Chiffre.

Versuchen Sie, diese beiden Zeilen in der "slc_output_captcha_code()"-Funktion

  $start = mt_rand( 0, 3 );
  $answer = substr( (string) $answer_pool, $start, 3 );

auf diese Weise zu bearbeiten, um einen 8-stelligen Code zu erhalten:

  $start = mt_rand( 0, 1 );
  $answer = substr( (string) $answer_pool, $start, 8 );

2) Und damit 8 Ziffern in der Datenbank gespeichert werden, nicht 5, bearbeiten Sie diese Zeile in der "slc_create_captcha_db_table()"-Funktion

    . 'answer varchar(5) DEFAULT NULL, '

wie folgt:

    . 'answer varchar(8) DEFAULT NULL, '

3) Da sich die Änderungen auf die Datenbank beziehen, müssen Sie das Plugin entfernen und dann das bearbeitete Plugin installieren.

Speichern Sie dazu den Ordner mit dem bearbeiteten Plugin über FTP, erstellen Sie ein ZIP-Archiv daraus, löschen Sie das Plugin aus WordPress und installieren Sie das Plugin aus Ihrem ZIP-Archiv.

Wenn Fehler auftreten, müssen Sie möglicherweise den Ordner mit dem Plugin erneut löschen, um wieder auf WordPress zugreifen zu können.

4) Wenn das Problem nach der Neuinstallation des Plugins weiterhin besteht, muss nach dem Entfernen des Plugins die vom Plugin erstellte Datentabelle mit phpMyAdmin aus der Datenbank entfernt werden. Dann wird diese Datentabelle bei der anschließenden Installation des Plugins sicher neu erstellt.

Zwangsbedingungen werden verwendet, um den Datentyp zu begrenzen, der in eine Tabelle aufgenommen werden kann. Dies stellt die Genauigkeit und Zuverlässigkeit der Daten in der Tabelle sicher. Wenn zwischen der Zwangsbedingung und der Datenaktion ein Verstoß vorliegt, wird die Aktion abgebrochen.

• https://www.w3schools.com/sql/sql_constraints.asp (auf Englisch)
• https://wikis.gm.fh-koeln.de/Datenbanken/CONSTRAINT

Die folgenden Zwangsbedingungen werden häufig in SQL verwendet:

• NOT NULL
• UNIQUE
• PRIMARY KEY
• FOREIGN KEY
• CHECK
• DEFAULT
• INDEX

Zum Beispiel:

CREATE TABLE CUSTOMERS(
  ID   INT          NOT NULL,
  NAME VARCHAR (20) NOT NULL,
  AGE  INT          NOT NULL,
  PRIMARY KEY (ID)
);

Höchstwahrscheinlich reicht es aus, eine der CSS-Dateien auf Ihrer Site zu bearbeiten, um die Richtung der Animation für die Spirale zu ändern.

Hier sind zum Beispiel zwei einfache Spiralen. Eine Spirale dreht sich in die eine und die andere in die entgegengesetzte Richtung.

HTML

<div class="spiral"></div>
<div class="spiral spiral-contra"></div>

CSS

.spiral {
	background: url("https://webstockreview.net/images/circle-clipart-swirl-3.png") center / contain no-repeat;
	width: 100px;
	height: 100px;
	animation: spiral 3s linear infinite;
}
.spiral-contra {
	animation-name: spiral-contra;
}

@keyframes spiral {
	0% { transform: none; }  
	100% { transform: rotate(360deg); }
}
@keyframes spiral-contra {
	0% { transform: none; }  
	100% { transform: rotate(-360deg); }
}

Am einfachsten ist es, sich auf Änderungen in CSS zu beschränken.

Sie können beispielsweise zusammen mit der Stilklasse „mega-menu“ dem gewünschten Menüelement eine eigene Stilklasse hinzufügen. Das ist zum Beispiel „mega-menu my-mega-menu“ statt nur „mega-menu“.

https://www.elegantthemes.com/documentation/divi/mega-menus/

Danach können Sie das Verhalten dieses Mega-Menüs mit Hilfe zusätzlicher CSS-Anweisungen neu definieren. Zum Beispiel so:

#et-navigation .mega-menu.my-mega-menu > ul {
	flex-direction: column;
	min-height: 100vh;
	min-height: calc( 100vh - 80px );
}
#et-navigation .mega-menu.my-mega-menu > ul > li.menu-item-has-children {
	position: static;
}
#et-navigation .mega-menu.my-mega-menu > ul > li > ul {
	position: absolute;
	top: 15px; /* = padding of <ul> */ 
	bottom: 15px;
	right: 15px;
	left: 25%; /* = width of the first column */
 	display: none;
	overflow-y: auto;
  width: auto;
}
#et-navigation .mega-menu.my-mega-menu > ul > li:hover > ul {
	display: block;
}

Sie können ein Bild als Hintegrund platzieren und seine Position und Größe durch CSS-Eigenschaften definieren:

• background-image
• background-position
• background-repeat
• background-size

HTML:

<a href="" class="my-button"></a>
<button class="my-button"></button>

CSS:

.my-button {
	display: block; /* oder inline-block, damit die Schaltfläche auf Größe und Hintergrund eingestellt werden kann */
	width: 50px; 	
	height: 50px;
    margin: 15px;

	border: 1px solid green;
	border-radius: 50%;

    /* Farbe des Hintergrunds */
	background-color: white;

    /* Platziere ein Bild als Hintergrund */
	background-image: url("https://www.gutefrage.net/nmms-assets/images/immutable/brand/brand-symbol.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;  /* oder 30px, oder contain, oder cover */
}

Das Ergebnis sieht so aus: