Wordpress - Word Genearator

TappamWah · 22.01.2020

Hallo zusammen!
Ich bin noch ziemlich unerfahren, was Wordpress angeht und hoffe, dass mir jemnad weiterhelfen kann...
Ich suche nach einenm Widget oder Plugin für Wordpress, der auf der Homepage dann zufällige hinterlegte Wörter generiert.

So stelle ich es mir in etwa vor
________________________________
Ich habe zB irgendwo im Backend folgendes hinterlegt:
1. Mensch
2. Alien
3. Tier
--
1. Jung
2. Erwachsen
3. Alt
--
1. Kämpfer
2. Schütze
3. Magier

Im Frontend soll dementsprechend ein "Generieren" Button erscheinen, der per Knopfdruck folgendes generieren kann:
1. Mensch 2. Erwachsen 1. Kämpfer
oder
2. Alien 1. Jung 2. Schütze
und so weiter
______________________________________

Kennt´s ihr so etwas in der Art? Alternativen wären auch ok, wenn zB kein Button erscheint und man immer per F5 aktualiseren muss, dass das Ganze generiert wird.

TappamWah · 27.01.2020

Huhu, ich bin es wieder)))
Jetzt habe ich einen Code gefunden, der mir ähnliches ermöglicht:

und habe ihn über WP Coder so übernommen:

Aber irgendwie kommt ein Schmarrn raus

So war es:

Das passiert nachdem ich den Code einfüge:

und so möchte ich es haben:

Ich denke da muss man an dem CSS Code was verändern? Bin da echt auf euren Ratschlag angewiesen, ich kenne mich da so gar nicht aus :confused:

owieortho · 28.01.2020

Du kannst ja das CSS des Generators separat speichern und rufst dann zwei .css-Dateien im HTML auf. Wenn Du dann die Seite mit einem Inspektionstool (bspw. im Firefox) untersuchst, dann ist ganz leicht ersichtlich, woher welche Seitenelemente ihre css-Anweisungen hernehmen und erben. Jetzt müsstest Du Doppelungen und Zweideutigkeiten auseinanderbauen.
Alternativ könntest Du den class- und id-Identifiern im Generator-HTML und -CSS eindeutige Präfixe geben. Beispiel:

HTML:

<div class="container">
wird zu
<div class="qpwo_container">

und

Code:

.container p {
wird zu
.qpwo_container p {

Alle anderen Selektoren (h1 etc.) müssten per class oder id individuell angesprochen werden. So wie es ist, gibt es z. B. Anweisungen für den body-tag aus dem Skript-CSS und höchstwahrscheinlich von Deinen WP-CSS-Dateien.

O.

TappamWah · 28.01.2020

Danke, das hat mir schon etwas geholfen) Ich konnte den Container in seiner Größe zumindest reduzieren, aber irgenwie bekomme ich es trotzdem nicht optimal hin(( Jetzt hab ich ganze Nacht rumprobiert, dass bei mir der generierte Text und evtl der Button angezeigt wird. Bin aber langsam echt am Ende :confused:

HTML:

<div style="box-sizing:border-box;display:flex;justify-content:center;align-items:center">
  <h1> Sentence Generator</h1>
  <id=button1 style="" onclick="sentence()">Refresh<i class="fa fa-refresh" aria-hidden="true"></i></id=button1>
</div>
<div class="qpwo_container">
  <p id="sentence"></p>
    </div>

Code:

body {
  color: #2e2e2e;
  font-family: sans-serif;
  font-size: 21px;
  text-align: justify;
  margin: 0 auto;
}

.qpwo_container {
  background-color: #35A54A;
  color: whitesmoke;
  position: relative;
  /*                margin-top: 10vh;*/
  height: 200px;
  padding-top: 14vh;
  box-sizing: border-box;
}

.qpwo_container p {
  margin-top: 10vh;
  padding: 5px;
  line-height: 1.6;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 73px;
  /*                top: 20vh;*/
}

h1 {
  font-size: 20px;
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  margin-right: 20px;
}

button1 {
  height: 60px;
  justify-content: right;
  outline: none;
  font-famiy: sans-serif;
  position: relative;
  padding: 10px;
  width: 120px;
  left: 100vh;
  border: none;
  background-color: #fff;
  border: 2px solid #1b1b1b;
  color: #1b1b1b;
  transition: 500ms ease-in;
  font-size: 18px;
  display: flex;
  justify-content: center;
}

button i {
  margin-left: 3px;
}

button:hover {
  color: #fff;
  background-color: #1b1b1b;
}

.container:first-child {
  height: 30vh !important;
}

@media screen and (max-width: 565px) {
  .container p {
    font-size: 17px;
  }
  div:first-child {
    height: 2vh;
  }
}

@media screen and (min-width: 565px) {
  body {
    text-align: center;
  }
}

Code:

            var verbs, nouns, adjectives, adverbs, preposition;
            nouns = ["bird", "clock", "boy", "plastic", "duck", "teacher", "old lady", "professor", "hamster", "dog"];
            verbs = ["kicked", "ran", "flew", "dodged", "sliced", "rolled", "died", "breathed", "slept", "killed"];
            adjectives = ["beautiful", "lazy", "professional", "lovely", "dumb", "rough", "soft", "hot", "vibrating", "slimy"];
            adverbs = ["slowly", "elegantly", "precisely", "quickly", "sadly", "humbly", "proudly", "shockingly", "calmly", "passionately"];
            preposition = ["down", "into", "up", "on", "upon", "below", "above", "through", "across", "towards"];

            function randGen() {
              return Math.floor(Math.random() * 5);
            }

            function sentence() {
              var rand1 = Math.floor(Math.random() * 10);
              var rand2 = Math.floor(Math.random() * 10);
              var rand3 = Math.floor(Math.random() * 10);
              var rand4 = Math.floor(Math.random() * 10);
              var rand5 = Math.floor(Math.random() * 10);
              var rand6 = Math.floor(Math.random() * 10);
              //                var randCol = [rand1,rand2,rand3,rand4,rand5];
              //                var i = randGen();
              var content = "The " + adjectives[rand1] + " " + nouns[rand2] + " " + adverbs[rand3] + " " + verbs[rand4] + " because some " + nouns[rand1] + " " + adverbs[rand1] + " " + verbs[rand1] + " " + preposition[rand1] + " a " + adjectives[rand2] + " " + nouns[rand5] + " which, became a " + adjectives[rand3] + ", " + adjectives[rand4] + " " + nouns[rand6] + ".";

              document.getElementById('sentence').innerHTML = """ + content + """;
            };
            sentence();

owieortho · 28.01.2020

Moin,
wenn Du nur die oben ersichtlichen Änderungen (die container-Umbenennungen, wobei qpwo eine willkürliche Buchstabenfolge ist) durchgeführt hast, sind schon dort Unstimmigkeiten voraussehbar.
Z. B. im CSS die Anweisung für das h1-tag:

Code:

h1 {
  font-size: 20px;
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  margin-right: 20px;
}

Nehmen wir mal an, Du hast dies CSS als generator.css abgespeichert. Wordpress bringt auch mindestens eine .css-Datei mit. Nennen wir die mal wp.css. Und jetzt nehmen wir mal an, die wp.css enthält diese Anweisung:

Code:

h1 {
  font-size: 20px;
  color: #f00;
  font-family: 'Arial Black', sans-serif;
  margin-right: 50px;
}

Dann könntest Du diese im HTML folgendermaßen im head-Bereich einbinden:

HTML:

<style type="text/css" rel="stylesheet" href="der/pfad/zu/den/dateien/wp.css">
<style type="text/css" rel="stylesheet" href="der/pfad/zu/den/dateien/generator.css">
oder
<style type="text/css" rel="stylesheet" href="der/pfad/zu/den/dateien/generator.css">
<style type="text/css" rel="stylesheet" href="der/pfad/zu/den/dateien/wp.css">

Es ändert sich nur die Reihenfolge, aber jedesmal ist das Ergebnis ein anderes. Als Erstes wird die zuerst referenzierte CSS ausgewertet und die zweite CSS ergänzt die gemachten Anweisungen, bzw. überschreibt sie oder gibt ganz neue Anweisungen. Immer das Letzte gilt. D. h. im ersten Fall wäre die endgültige Anweisung für die margin 20px, im zweiten Fall 50px. Nur durch vertauschen der Aufrufreihenfolge. Und hier ist nur eine Eigenschaft betroffen und ein Selektor.
Du müsstest für jedes verwendete Element in Deinem Generator ein individuell adressierbares Merkmal einsetzen. Bspw.:

HTML:

<h1 class="qpwo">Generatorüberschrift</h1>

und dazugehörend im generator.css:

Code:

h1 .qpwo {
  font-size: 20px;
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  margin-right: 20px; /*Deine ursprünglichen Anweisungen, lediglich der Selektor beschränkt sich nun auf h1 der Klasse qpwo*/
}

Und ds jetzt nicht nur für den h1-Tag sondern alle im Generator-Skript verwendeten tags, classes und ids.
O.

Myhar · 28.01.2020

"<id=button1" gibt es im HTML nicht. Hier muss es <button id="button1" ...> </button> heißen.
Dann greift auch dein css für den button

TappamWah · 28.01.2020

Ich sehe schon - war eine Schnapsidee von mir ohne jegliche Kenntnisse so etwas anzufangen^^
Danke für die Hilfe ich bin schon etwas weiter:

Aber mich wundert immer noch, wo der generierte Text hin ist.. Hab ich irgendein ID übersehen?

HTML:

<div style="box-sizing:border-box;display:flex;justify-content:center;align-items:center">
  <h1 class="qwpo"> Sentence Generator</h1>
  <button id="qpwo button" style="" onclick="qpwo sentence()">Refresh<i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
<div class="qpwo_container">
  <p id="qpwo sentence"></p>
    </div>

Code:

body {
  color: #2e2e2e;
  font-family: sans-serif;
  font-size: 21px;
  text-align: justify;
  margin: 0 auto;
}

.qpwo_container {
  background-color: #35A54A;
  color: whitesmoke;
  position: relative;
  /*                margin-top: 10vh;*/
  height: 200px;
  padding-top: 14vh;
  box-sizing: border-box;
}

.qpwo_container p {
  margin-top: 10vh;
  padding: 5px;
  line-height: 1.6;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 73px;
  /*                top: 20vh;*/
}

h1 .qpwo {
  font-size: 20px;
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  margin-right: 20px;
}

 qpwo button {
  height: 60px;
  justify-content: right;
  outline: none;
  font-famiy: sans-serif;
  position: relative;
  padding: 10px;
  width: 120px;
  left: 100vh;
  border: none;
  background-color: #fff;
  border: 2px solid #1b1b1b;
  color: #1b1b1b;
  transition: 500ms ease-in;
  font-size: 18px;
  display: flex;
  justify-content: center;
}

 qpwo button i {
  margin-left: 3px;
}

 qpwo button:hover {
  color: #fff;
  background-color: #1b1b1b;
}

.qpwo_container:first-child {
  height: 30vh !important;
}

@media screen and (max-width: 565px) {
  .qpwo_container p {
    font-size: 17px;
  }
  div:first-child {
    height: 2vh;
  }
}

@media screen and (min-width: 565px) {
  body {
    text-align: center;
  }
}

owieortho · 28.01.2020

Jetzt musst Du natürlich auch noch im JS alles passend bekommen. Da das JS über die ids zugreift, sind dort auch die geänderten Namen zu verwenden. Beispiel:

Code:

... document.getElementById('qpwo_sentence').innerHTML = """ + content + """;
            };
            sentence();

Übrigens dürfen in JS die Namen von Funktionen keine Leerzeichen enthalten. Ebenso wird Dein CSS anders reagieren, wenn Du class- und id-Werte mit Leerzeichen versiehst:

HTML:

<button id="qpwo button" ... class="fa fa-refresh" 
... id="qpwo sentence" ...

würden jeweils zwei CSS-Anweisungen an das bezeichnete Element geben. Ist in Ordnung, wenn das so gewollt ist, aber das glaube ich hier eher nicht.
Und hier nun das Beispiel für die korrekt bezeichnete Funktion:

HTML:

... onclick="qpwo_sentence()"> ...

Es ist tatsächlich mehr dabei, als nur Codeschnipsel zusammen zu kopieren....
O.

TappamWah · 28.01.2020

owieortho schrieb:
Es ist tatsächlich mehr dabei, als nur Codeschnipsel zusammen zu kopieren....

Ist es auf jeden Fall... Aber ich hatte auch nicht damit gerechnet, dass ich mit Codes hantieren muss( Ich dachte es wird auf jeden Fall irgendein Plugin geben, der zufälligen Wörter aus einer Datenbank generieren kann. Das Ganze hatte ich erstmal in Excel ausprobiert und war ja auch nichts dabei. Naja, jetzt muss ich irgendwie durch.

Überseh ich etwas, oder ist in der JS tatsächlich nur ein id? Weil funzen will es noch nicht und in der "document.getElementById" Zeile taucht "unexpected String" auf...

Code:

            var verbs, nouns, adjectives, adverbs, preposition;
            nouns = ["bird", "clock", "boy", "plastic", "duck", "teacher", "old lady", "professor", "hamster", "dog"];
            verbs = ["kicked", "ran", "flew", "dodged", "sliced", "rolled", "died", "breathed", "slept", "killed"];
            adjectives = ["beautiful", "lazy", "professional", "lovely", "dumb", "rough", "soft", "hot", "vibrating", "slimy"];
            adverbs = ["slowly", "elegantly", "precisely", "quickly", "sadly", "humbly", "proudly", "shockingly", "calmly", "passionately"];
            preposition = ["down", "into", "up", "on", "upon", "below", "above", "through", "across", "towards"];

            function randGen() {
              return Math.floor(Math.random() * 5);
            }

            function sentence() {
              var rand1 = Math.floor(Math.random() * 10);
              var rand2 = Math.floor(Math.random() * 10);
              var rand3 = Math.floor(Math.random() * 10);
              var rand4 = Math.floor(Math.random() * 10);
              var rand5 = Math.floor(Math.random() * 10);
              var rand6 = Math.floor(Math.random() * 10);
              //                var randCol = [rand1,rand2,rand3,rand4,rand5];
              //                var i = randGen();
              var content = "The " + adjectives[rand1] + " " + nouns[rand2] + " " + adverbs[rand3] + " " + verbs[rand4] + " because some " + nouns[rand1] + " " + adverbs[rand1] + " " + verbs[rand1] + " " + preposition[rand1] + " a " + adjectives[rand2] + " " + nouns[rand5] + " which, became a " + adjectives[rand3] + ", " + adjectives[rand4] + " " + nouns[rand6] + ".";

              document.getElementById('qpwo_sentence').innerHTML = """ + content + """;
            };
            sentence();

Und für was soll eigentlich ein "fa_fa_refresh" stehen? Das tauch sonst nirgendwo mehr auf

TappamWah · 29.01.2020

Jetzt wieder eine schlaflose Nacht hinter sich gebracht, bin aber etwas weiter))

Allerdings zwei Probleme:
Jedes Mal wenn ich, CSS oder HTML aktualisiere, dann ändert sich der Code in JS von:

Code:

           document.getElementById('qpwo_sentence').innerHTML = "&quot;" + content + "&quot;";
            };
            qpwo_sentence();

ins

Code:

document.getElementById('qpwo_sentence').innerHTML = """ + content + """;
            };
            qpwo_sentence();

Und als Folge habe ich unexpected String bei

Code:

""" + content + """;

stehen...

Problem Nr2
Der generierte Text wird so angezeigt:

Und das wird wohl wieder CSS sein....

Code:

body {
  color: #2e2e2e;
  font-family: arial;
  font-size: 21px;
  text-align: justify;
  margin: 20px;
    margin-left: 0 Auto;
}

.qpwo_container {
  background-color: #35A54A;
  color: whitesmoke;
  position: relative;
  margin-top: 2vh;
  height: 565px;
  padding-top: 14vh;
  box-sizing: border-box;
}

.qpwo_container p {
  margin-top: 10vh;
  padding: 5px;
  line-height: 1.6;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 73px;
  top: 20vh;
}

h1 .qpwo {
  font-size: 20px;
  text-align: center;
  font-family: 'Fira Sans Condensed', sans-serif;
  margin-right: 20px;
}

 qpwo_button {
  height: 60px;
  justify-content: right;
  outline: none;
  font-famiy: sans-serif;
  position: relative;
  padding: 20px;
  width: 120px;
  left: 100vh;
  border: none;
  background-color: #fff;
  border: 3px dotted #1b1b1b;
  color: #1b1b1b;
  transition: 500ms ease-in;
  font-size: 14px;
  display: flex;
    justify-content: center;
}

 qpwo_button i {
  margin-left: 3px;
}

 qpwo_button:hover {
  color: #fff;
  background-color: #1b1b1b;
}

.qpwo_container:first-child {
  height: 30vh !important;
}

@media screen and (max-width: 565px) {
  .qpwo_container p {
    font-size: 17px;
  }
  div:first-child {
    height: 2vh;
  }
}

@media screen and (min-width: 565px) {
  body {
    text-align: center;
  }
}

TappamWah · 29.01.2020

Update: Problem nr2 gelöst)))

Code:

.qpwo_container p {
  margin-top: 10vh;
  padding: 5px;
  line-height: 1.6;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 73px;
  top: 20vh;

73px ist etwas zu schmal))

Jetzt muss ich nur rausfinden, warum sich der Code beim JS jedes Mal ändert...

Myhar · 29.01.2020

Es braucht heutzutage an keiner Stelle mehr " (oder ähnliches wie ü ... )
Du kannst das folgendermaßen schreiben:
Am einfachsten ist es du mischt " und ':
document.getElementById('qpwo_sentence').innerHTML = "'" + content + "'";
Oder so: document.getElementById('qpwo_sentence').innerHTML = "\"" + content + "\"";

Auch frage ich mich wieso du Höhe und Breite fix vorgibst, ist es nicht besser die Höhe + Breite passt sich dem Inhalt an?

TappamWah · 30.01.2020

@Myhar Danke, "'" + content + "'"; hat funktioniert))

Nun, ich experimentiere rum, bis vor eine Woche waren css,js und html für mich Fremdwörter. Jetzt versuche ich zu verstehen, was hinter den gnzen Blocke steckt.
Bei dem einem Container war allerdings 73cr vorgegeben... Hat mein WP so nocht akzeptiert und ich das ist ein Verschreiber und habe es durch px ersetzt

TappamWah · 30.01.2020

Also es schaut jetzt ganz gut aus:
2dgym.de

Jetzt hab ich eine Frage, ist es denn möglich die generierten Wörter untereinander zu platzieren und nicht in einer Zeile?
Da gibt es doch bestimmt einen Befehl dafür oder?

owieortho · 30.01.2020

Nimm das JS und füge an den entsprechenden Stellen einen linebreak ein:

Code:

 ... var content = "The<br>" + adjectives[rand1] + "<br>" + ....

Das sollte es sein. Kannst natürlich noch andere Unterteilungen einfügen. Du willst wahrscheinlich eher eine Art Formular haben, das dann möglicherweise gruppiert ist nach persönlichen Daten, Eigenschaften, Herkunft, Symbole, etc.
O.

TappamWah · 30.01.2020

Ja, wäre ideal. Am idealsten wäre in 3 Spalten zu unterteilen. Geht es auch in JS, oder müsste ich dafür einen Grid in CSS erstellen?

Noch eine ziemliche Laienfrage)) wie bringe ich eigentlich den Button drunter? :rolleyes:

owieortho · 30.01.2020

In der Zeile 218 Deines HTML wird der Button ausgezeichnet, in Zeile 222 der generierte Textblock. Diese beiden Blöcke musst Du im HTML tauschen.
So, Du hast ja nun mittlerweile ganz schön im Quelltext gewerkelt. Ich will kein Spielverderber sein, aber schau Dir mal das Resultat an:

Gerade in dem Bereich, den ich oben angesprochen habe, hagelt es Fehlermeldungen. Du hast grundlegende Regeln missachtet:

Reihenfolge beim nesting missachtet
Block-Elemente in inline-Elementen platziert
geöffnete tags nicht geschlossen oder umgekehrt
Zeichen (an Stellen) verwendet, die (dort) nicht zulässig sind

Mag sein, dass das Ergebnis bei Dir richtig aussieht, aber ein nicht valides Markup kann bei einer anderen OS-Browser-Versions-Kombination ganz schön anders bis gar nicht aussehen.
Go tidy!
O.

TappamWah · 30.01.2020

Oje))
Gut, dass es so etwas gibt)) Ja, ich werde mich dem annehmen^^ Wäre ja auch seltsam, wenn es am Schluss ohne Fehler wäre

owieortho · 30.01.2020

Nur Mut! Du hast Dich ja schon ins Getümmel gestürzt und nun, wo Du weisst, wo Du nachbessern musst, ist es wieder nur Fleißarbeit. Gelernt hast Du auf jeden Fall schon eine ganze Menge.

TappamWah · 30.01.2020

Hmm jetzt stellt sich aber die Frage, wie komme ich in den Quellcode von der ganzen Seite rein, um es nachzubessern?
Finde auf WP selber die Option nicht und wenn ich die HTML, CSS, und JS Codes einzeln angucke, habe ich die angezeigten Einträge gar nicht..