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"

...zur Antwort

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?"

...zur Antwort

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.

...zur Antwort

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

...zur Antwort

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/

...zur Antwort

"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'));
...zur Antwort

Ü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.

...zur Antwort

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.

...zur Antwort

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.
...zur Antwort

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!');
}
...zur Antwort

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.
...zur Antwort

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>
...zur Antwort

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.

...zur Antwort

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)
);
...zur Antwort

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); }
}
...zur Antwort

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;
}

...zur Antwort

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:

...zur Antwort

Verwenden Sie die ":hover"-Pseudoelemente für das "<tr>"-Tag Ihrer Tabelle.

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

Die :hover CSS  Pseudoklasse wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren.

CSS

.my-table tr:hover {
	background: #ccc;
	color: red;
}

HTML

<table class="my-table">
	<tr>
		<td>1</td>
		<td>Eins</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Zwei</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Drei</td>
	</tr>
</table>

...zur Antwort

Seit ES2015 iterieren die meisten Browser Objekteigenschaften wie folgt:

  1. Ganzzahlschlüssel in aufsteigender Reihenfolge (und Zeichenfolgen wie "1", die als Ganzzahlen analysiert werden)
  2. Zeichenfolgenschlüssel in der Reihenfolge der Einfügung
  3. Symbolnamen in der Reihenfolge der Einfügung

Dieses Verhalten wird in der internen Methode [[OwnPropertyKeys]] definiert.

Wenn Ihre Objekte nur über die Strings-Schlüssel verfügen, können Sie ein sortiertes Objekt abrufen, indem Sie ein neues erstellen und dessen Eigenschaften in der erforderlichen Reihenfolge einfügen.

Sie können auch ein temporäres Array von Objekten der Form {'key': '...', 'value': '...'} und die Methode sort() verwenden, um die Elemente in sortierter Reihenfolge abzurufen.

// Eingangsdaten
var data = {
	'userone": '2",
	'usertwo": '57",
	'userthree": '40',
};

// Hilfsarray von Objekten
var dataArray = [];
Object.keys(data).forEach(function(key) {
	dataArray.push({ 'key': key, 'value': data[key] });
});

// Sortierung
dataArray.sort(function(a, b) {
	return a['value'] - b['value'];
});

// Objekt mit Eigenschaften in der gewünschten Reihenfolge
var result = {};
dataArray.forEach(function(item) {
	result[item['key']] = item['value'];
});

// Ausgangsdaten
console.log('dataArray', dataArray);
console.log('result', result);

Ergebnisse in der Browserkonsole:

...zur Antwort