Umfrage-Tool! – Nutze WP-Polls, modern und effektiv

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Der Erfolg des CMS WordPress kommt von seiner Lebendigkeit. Diese besteht nicht nur aus Kommentaren und Feedback-Plugins, sondern auch aus nützlichen Tools wie dem Rundfrage-Formular. Das Umfrage-Tool "WP-Polls" von Ideal ist dabei eine hervorragende Wahl. Zwar mag es am Anfang etwas schwierig sein, sich damit vertraut zu machen, doch mit etwas Einarbeitung wird es für jeden erfolgreich sein.

Das immer noch moderne Umfrage-Tool WP-Polls ist ein Beispiel für die Kraft von WordPress.

WP-Polls

Ein Beispiel für die Verwendung von Umfragen ist das Plug-in WP-Polls. Für erfahrene Nutzer ist die Konfiguration intuitiv und macht Freude, da sowohl die Funktionalität als auch das CSS individuell angepasst werden können. Wenn du auf der Suche nach einem anderen Plug-in bist, könnte Poll Maker eine Option sein. Für sehr anspruchsvolle Anforderungen könnte "TotalSuite" (https://totalsuite.net/) eine geeignete Wahl sein.

Obwohl diese Frage eigentlich im Nachhinein gestellt werden sollte, bietet sich jetzt ein Beispiel mit dem Plug-in WP-Polls an.

Wird geladen ...

Hinweis: Diese Rundfrage war und ist nur in diesem Beitrag aktiv.

Tab 1: WP-Polls – das zeitgemäße Umfrage-Plug-in
Tab 2: Extras zum WP-Polls!
Tab 3: Umfrage-Template
Tab 4: WP-Polls und die Tastaturnavigation

WP-Polls

WP-Polls –
das zeitgemäße Umfrage-Plug-in

Das ist für 'Beginne' als auch für Autoren von Erfolg.

WP-Polls von Lester Chan ist eine brillante Wahl sowohl für Einsteiger als auch für etablierte Autoren. Mit seiner schlanken Größe von nur 240 KB erfüllt es auch die Anforderungen erfahrener Nutzer.

Poll Options

Die "Options" folgen deiner individuellen Einstellung. Dabei möchte ich drei der Optionen hervorheben: den Stil des Umfragebalkens, die Protokollierungsmethode und das Umfragearchiv.

Poll Bar Style: Die Darstellung der Balken in den Umfrageergebnissen kann individuell angepasst werden. Wenn du beispielsweise farbenfrohe Balken bevorzugst, findest du in den FAQ des Plug-ins ein Beispiel hierfür oder gleich hier:

.wp-polls-ul li:nth-child(01) .pollbar {
    background: #8fa0c5;
}
.wp-polls-ul li:nth-child(02) .pollbar {
    background: #ff8;
}
.wp-polls-ul li:nth-child(03) .pollbar {
    background: #ff8a3b;
}
.wp-polls-ul li:nth-child(04) .pollbar {
    background: #a61e2a;
}
.wp-polls-ul li:nth-child(05) .pollbar {
    background: #4ebbff;
}
.wp-polls-ul li:nth-child(06) .pollbar {
    background: #fbca54;
}
.wp-polls-ul li:nth-child(07) .pollbar {
    background: #aad34f;
}
.wp-polls-ul li:nth-child(08) .pollbar {
    background: #66cc9a;
}
.wp-polls-ul li:nth-child(09) .pollbar {
    background: #98cbcb;
}
.wp-polls-ul li:nth-child(10) .pollbar {
    background: #a67c52;
}
.wp-polls-ul li .pollbar {
    transition: background 0.7s ease-in-out;
}
.wp-polls-ul li .pollbar:hover {
    background: #f00;
}

Du kannst das am Ende der Datei poll-css.css hinzufügen.

Bitte beachte, dass diese Anpassungen nach einem Plug-in-Update erneut durchgeführt werden müssen. Alternativ bietet das Plug-in auch die Möglichkeit, eine poll-css.css-Datei im Child-Theme zu erstellen und dort die Umfrage-Stile zu speichern. Auf diese Weise bleiben deine individuellen Umfrage-Stile bei einem Update erhalten und werden nicht überschrieben.

In der Option Protokollierungsmethode kannst du ein Cookie mit einer bestimmten Dauer in Sekunden einstellen, um sicherzustellen, dass jeder Benutzer nur einmal abstimmen kann. Dieses Cookie wird normalerweise als funktionaler Cookie betrachtet.

- 1296000 s sind 15 Tage
- 2592000 s sind 30 Tage
- 5184000 s sind 60 Tage
- 7776000 s sind 90 Tage

Hingegen erfordert die Verwendung von IDs in der Regel die Einwilligung der betroffenen Personen und die Bereitstellung klarer Informationen darüber, wie die Daten erfasst und verwendet werden.

Bei der Option Umfragearchiv / URL des Umfragearchivs könnte eine URL wie https://deinedomain.at/pollsarchive verwendet werden. Diese Seite welcher URL ist separat zu erstellen und in den Inhalsbereich ist der Shortcode [page_polls] einzutragen. Genaueres ist unter FAQ (Wie füge ich ein Umfragearchiv hinzu?) des Plug-ins zu finden. Wenn du der Anleitung des Plug-ins folgst, kannst du die Ergebnisse der Umfragen unter https://deinedomain.at/pollsarchive dann einsehen. Dies kann sinnvoll sein, wenn bestimmte Umfragen abgelaufen sind und nur noch die Ergebnisse angezeigt werden sollen.

Andersrum schau dir mal die Seite https://wegerl.at/pollsarchive-aktiv/ an. Dort findest du aktive Umfragen, diese sind manuell mit der jeweiliger Umfrage-ID eingetragen. Auf dieser Seite kannst du erneut abstimmen und auch sehen, wie andere Leute gevotet haben. Wir freuen uns immer noch über deine Stimme!

Pollsarchive. – dein Vote ist nach wie vor sehr gefragt

WP-Polls – Hol dir das Meinungsbild der Community!

Poll Templates

Grundsätzlich könnten Poll-Templates so belassen werden, wie sie sind, können jedoch auch individuell angepasst werden. Dabei ist zu beachten, dass Anpassungen zeitaufwendig sein können. Im Tab 3 findest du eine Vorlage als Beispiel von dieser Website.

Add Poll. – als dann

Um eine erfolgreiche Abstimmung zu gewährleisten, sollte die Umfrage verständlich für jeden sein. Erfolgreich sind in der Regel Umfragen, die ein allgemeines Interesse erwecken. Um eine Umfrage hinzuzufügen, wähle die Option 'Add Poll'.

Nachlesen wie das der Skalen von Antworten: Du kannst mehr über Antwortskalen und Tipps für die richtigen Skalen lesen, indem du nach entsprechenden Ressourcen suchst. Eine nützliche Ressource könnte beispielsweise ein PDF zum Thema Antwortskalen sein.

Edit Poll

Nachdem du eine Umfrage erstellt hast, kannst du sie auch bearbeiten. Du kannst sogar die Ergebnisse bearbeiten. Ein Beispiel dafür wäre, wenn du Umfragen von einem anderen Poll-Plug-in überträgst. Export und Import von Umfragen sind jedoch nicht vorgesehen.

Widget WP-Polls

Es gibt ein perfektes Widget namens WP-Polls, aber wir verwenden es nicht, da wir die Umfrage im Boxzilla Pop-up auf der Website platziert haben. Die Verwendung des Widgets würde hier problematisch sein, da es zu Konflikten kommt, wenn zwei identische IDs auf einer Seite vorhanden sind. Normalerweise ist das Widget ideal für die Seitenleiste und am besten oberhalb des Falzes* der Webseite zu platzieren.

*Above the Fold. Oberhalb der Falz – das ist der Bereich von Webseite, der für die Nutzer auf den ersten Blick sichtbar ist, ohne zu scrollen. Folgernd ist das dem Medium von Tageszeitung als Bereich der Titelseite oberhalb der Falz, also bevor man die Zeitung zum Weiterlesen auseinanderklappt.

Tab 2: Extras zum WP-Polls!

Tab 2

Extras zum WP-Polls!

Die Anpassung des Umfrage-Formulars erfolgt über das Dashboard unter "Polls" → "Poll Options" und "Poll Templates". Weitere Informationen findest du in "Tab 3: Umfrage-Template". Im nächsten Abschnitt findest du das aufgeschlüsselte CSS und eine Erklärung zur Formatierung des Erstellungsdatums

CSS für WP-Polls

Das CSS umfasst einerseits das Umfrage-Formular und andererseits die Checkbox- und Radio-Buttons. Es ist also in zwei Teilen zu betrachten.

Es ist erwähnenswert, dass das Folgende getestet werden sollte, da in der mobilen Ansicht gelegentlich ein zusätzliches !important erforderlich sein kann.

Im "Tab 3 Umfrage-Template" findest du ein Beispiel für die Umfrage sowie das dazugehörige CSS zur weiteren Veranschaulichung.

Erster Teil, das Umfrage-Formular:

Der CSS-Code, der /*auskommentiert*/ ist, kann verwendet werden, falls erforderlich.

/* == WP-Polls == */

/* Lade-Animation */
.wp-polls-loading {
    margin-top: -120px;
    margin-bottom: 120px;
} 

/* Layout und Farben */
.wp-polls {
    margin: 25px 0;
    background-color: #f4f4f4;
    padding: 25px 15px 15px 15px;
} 

/* Abstände zwischen Fragen und Antworten */
.wp-polls li {
    padding: 5px 0 5px 15px;
} 

/* Ergebnis-Balken: Abstand zur nächsten Antwort */
.wp-polls .pollbar {
    margin-bottom: 25px;
}

/* Button 'Abstimmen' */
.wp-polls .Buttons {
    border: 1px solid #c8c8c8;
    background-color: #24890c;
    color: #fff;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 400;
    width: 222px;
}
/*.wp-polls .Buttons:hover {
    background-color: #4a80eb;
}*/

/* Button für die Ergebnisse */ 
.wp-polls a[href="#ViewPollResults"] {
    border: 1px solid #c8c8c8;
    background-color: #0077a6;
    padding: 11px 59px;
    color: #fff !important;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 400;
    text-decoration: none;
}
.wp-polls a[href="#ViewPollResults"]:hover {
    background-color: rgba(26, 82, 138, 0.8);
}

/* Button 'Zurück' */
.wp-polls a[href="#VotePoll"] {
    border: 1px solid #c8c8c8;
    background-color: #0077a6;
    padding: 11px 66px;
    color: #fff !important;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 400;
    text-decoration: none;
}
.wp-polls a[href="#VotePoll"]:hover {
    background-color: rgba(26, 82, 138, 0.8);
} 

/* WP-Polls Ende */

Anmerkung zum obigen CSS

Wie ist eigentlich der Selektor a[href="#ViewPollResults"] zu bekommen? – siehe Entwickler-Werkzeug Browser! – so funktioniert’s.

Anmerkung zum CSS von "Button Ergebnisse" und "Button zurück Ergebnisse": Der Button war mit etwas CSS zu erschaffen.

So ziemlich jeder a-Tag ist individuell zu gestalten. Einfach mit: a[href=""] oder wenn der Link besonders anfängt, bspw bei einem Beitrag: a[id^="post-"]

Das ^ steht dann für "fängt mit an". Da geht einiges mit. Lese hier: https://www.w3schools.com/cssref/sel_attr_contain.asp. Funktioniert mit allen Attributen sowie oben auch mit dem href Attribut.

^{Pr. WP-Freund}

Zweiter Teil, Checkboxen und Radio-Buttons Designs:

Hier sind dann zwei Beispiele. Das CSS der Beispiele einfach so zu mischen, ist nicht zu empfehlen! – beide stehen für sich.

Ersten Beispiel: Das CSS für die Radio-Buttons und Checkboxes basiert auf der Website von Kulturbanause.

/* Checkbox- u. Radio-Buttons ausblenden */
.wp-polls input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    font-size: 1em;
    width: 100%;
}

.wp-polls input[type="checkbox"]:checked,
.wp-polls input[type="checkbox"]:not(:checked),
.wp-polls input[type="radio"]:checked,
.wp-polls input[type="radio"]:not(:checked) {
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

/* Checkbox- Radio-Buttons */
.wp-polls input[type="checkbox"] + label,
.wp-polls input[type="radio"] + label {
    cursor: pointer;
    font-size: 1.1em;
    font-family: inherit;
    font-weight: 300;
}

.wp-polls input[type="checkbox"]:checked + label::before,
.wp-polls input[type="checkbox"]:not(:checked) + label::before,
.wp-polls input[type="radio"]:checked + label::before,
.wp-polls input[type="radio"]:not(:checked) + label::before {
    content: " ";
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    top: 8px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease-out 0s;
}

.wp-polls input[type="radio"]:checked + label::before,
.wp-polls input[type="radio"]:not(:checked) + label::before {
    border-radius: 300px;
}

.wp-polls input[type="checkbox"]:hover + label::before,
.wp-polls input[type="radio"]:hover + label::before {
    background: #ddd;
    box-shadow: inset 0 0 0 2px white;
}

.wp-polls input[type="checkbox"]:checked + label::before,
.wp-polls input[type="radio"]:checked + label::before {
    background: #0077a6;
    box-shadow: inset 0 0 0 2px white;
    transition: all 0.5s ease-out 0s;
}

Anmerkung zum obigen CSS

Warum nicht einfach so ausblenden.
– mit display: none;

~~.wp-polls INPUT[type='checkbox'], .wp-polls INPUT[type='radio'] { display: none }~~

Antwort: Viele Browser sehen ein Element mit display: none; nicht, also nicht verfügbar. Sprich die Checkbox oder das Radio sind nicht klickbar mehr, weil sie nicht mehr existieren.

Deshalb muss man das Element irgendwo haben. Das Anklicken auf das Element wird mit dem label drumherum gegeben. Bsp:

<label><input></label>

Wenn man hier das input bspw. mit left -99999 und position: absolute, overflow:hidden versieht, dann ist das Element noch anklickbar, aber nicht sichtbar, wenn denn auch das <label> drumherum ist.

^{Pr. WP-Freund}

Zweites Beispiel: Wir möchten auf das CSS von Fiddle meta hinweisen. Der Ausgangspunkt war der Link auf "Stack Overflow" mit dem Titel Wie ändere ich die Größe des Kontrollkästchens mit CSS?

Wenn du dem Link von Fiddle meta und der entsprechenden Vorlage folgst, könnte sich die Frage stellen, wie man den Abstand zwischen den Radiobuttons und dem Text der Fragen erhöhen kann.

Hierbei sollte man nur mit Padding arbeiten und allen das gleiche left geben. Zum Beispiel: left: -1,8em;

Hier ist ein Beispiel der Vorlage sowie das entsprechende CSS, inklusive des Abstands nach oben, um es zentrierter auszurichten.

input[type='checkbox'] + label::before {
    top: 6.5px !important;
    left: -25px !important; /* den padding wieder abziehen */
}

input[type='checkbox'] + label {
    padding-left: 25px; /* padding, sprich innerer Abstand erhöhen */
}

Das Datum formatieren

Das Folgende zum Anzeigen des Erstellungsdatums bezieht sich auf Dashboard / Polls → Poll Templates des von %POLL_START_DATE%

Umfrage-Tool — Das Erstellungsdatum ist im Header oder Footer.

Wir hatte Mühe damit, das Erstellungsdatum einer Poll-Umfrage im gewünschten Format anzuzeigen. Das Datum wurde standardmäßig als '1. Juli 2022 @ 0:00' angezeigt, aber wir wollten nur den Monat und das Jahr ('Juli 2022′) darstellen. Obwohl wir die Plugin-Dateien durchsucht hatten, konnte wir nicht herausfinden, wo wir das Format ändern konnten. Schließlich baten wir einen WP-Freund um Hilfe, der uns schnell weiterhelfen konnte.

Um das Datum im WP-Polls-Plugin anzupassen, haben wir sowohl in der wp-polls.php-Datei als auch in der functions.php-Datei des Child-Themes entsprechende Anpassungen vorgenommen.

1. WP-Polls wp-polls.php: Navigiere zu Dashboard / Plugins / Plugin-Datei-Editor und öffne die wp-polls.php Datei. Die entsprechenden Zeilen sind 437 und 579. Leider gibt es keinen Filter, um das Datumsformat zu ändern. Allerdings kannst du Folgendes ausprobieren.

Aufgepasst! – der Hack ist zweimal einzutragen. Dem einen ist dann das Datum bei den Fragen und der zweite Eintrag ist für das Datum bei den Ergebnissen.

Zu ersetzen sind die Codes von Zeile 437
und die Codes von Zeile 579.

Beim Eintragen des folgenden PHP-Codes ist Vorsicht geboten. Lasse dich nicht von der Zeilennummer verwirren, wenn der Code bereits oben eingetragen wurde. In diesem Fall befindet sich der zweite Eintrag weiter unten. Alternativ kannst du auch von unten nach oben bearbeiten, beginnend mit Zeile 579 und dann Zeile 437. – ja und dann abspeichern.

/* Datum Edit */
$poll_start_date_date = apply_filters('wp_polls_start_date_date', '%s @ %s'); $poll_start_date_date_format = apply_filters('wp_polls_start_date_format', get_option('date_format')); $poll_start_date_time_format = apply_filters('wp_polls_start_date_time_format', get_option('time_format')); $poll_start_date = mysql2date(sprintf(__($poll_start_date_date, 'wp-polls'), $poll_start_date_date_format, $poll_start_date_time_format), gmdate('Y-m-d H:i:s', $poll_question->pollq_timestamp)); 
/* Datum Edit end */

^{Pr. WP-Freund}

Beachte jedoch, dass dies nach einem Update des Plug-ins zu erneuern ist. (Updates für dieses Plug-in sind normalerweise nicht häufig.) Verwende diesen Code als Merkzettel für sich.

Das in der wp-polls.php eingefügt so ist das Datum der Form Juli 2022. Somit ist aber jeder Poll-ID dasselbe neueste Erstellungsdatum.

Darum ist in des Themes functions.php noch zu machen:

Snippets functions.php, CSS und JavaScript: das Child-Theme. Spezifisch, CSS+JS: das Plug-in Header Footer Code Manager. Zum Workflow und Browser Cache siehe das Plug-in reBusted!

2. Theme functions.php

/* WP-Polls das Datum */ 
add_filter('wp_polls_start_date_date', function ($format) { return '%s %s'; }); 

add_filter('wp_polls_start_date_format', function ($format) { return 'F'; }); 

add_filter('wp_polls_start_date_time_format', function ($format) { return 'Y'; });

^{Pr. WP-Freund}

Option Umfragearchiv ↑: Es sollte jedoch beachtet werden, dass das Datum in der Auflistung nach dem Shortcode [page_polls] nicht automatisch angepasst wird und daher separat geändert werden müsste; und wir haben dafür keine spezielle Lösung.

Wer nur das Erstellungsdatum von Schriftgröße anpassen möchte so genügt das CSS:

.wp-polls-ans p {
font-size: 0.9rem !important;
}

Oder direkt unter "Umfrage-Templates" formatieren, siehe bei 'Footer des Umfrageformulars' (<p style="font-size: 0.8em">Start der Umfrage am %POLL_START_DATE%</p>). Wie bereits erwähnt, findest du im "Tab 3 Umfrage-Template" weitere Vorlagen.

Für WP-Polls Entwickler

Folgender Code ist ein Hack
Unten sehen Sie einen Beispielcode für einen Filter, den der Plug-in-Autor einbauen müsste, um das Datumsformat anpassbar zu machen:

$poll_start_date_format = apply_filters('wp_polls_start_date_format', '%s @ %s'); $poll_start_date = mysql2date(sprintf(__($poll_start_date_format, 'wp-polls'), get_option('date_format'), get_option('time_format')), gmdate('Y-m-d H:i:s', $poll_question->pollq_timestamp));

^{Pr. WP-Freund}

(Das Problem mit dem Filter besteht darin, dass hierbei darauf geachtet werden sollte, dass das sprintf nicht kaputtgeht, da es ein %s an zweiter Stelle erwartet. Zusätzliche Anpassungen könnten in Betracht gezogen werden, um sicherzustellen, dass alles reibungslos funktioniert.)

Vielen Dank 🙂 an unseren WP-Freund für diesen Hack! Allerdings sollte wir wohl den Autor von WP-Polls kontaktieren und nach einem Filter fragen, denn wenn das Plug-in aktualisiert wird, geht der Hack verloren. Falls es jemanden interessiert, könnte wir im Titel eine Anfrage dazu stellen: 'Wie soll ich vorgehen, um das Datum zu formatieren?

Tab 3: Umfrage-Template

Tab 3

Umfrage-Templates

Wir stellen hier ein Umfrage-Template zur Verfügung, wobei das Beispiel auf dieser Website zu finden ist.

Vorerst möchten wir darauf Hinweisen, dass es einen Unterschied zwischen folgenden Vorlagen gibt:

Templates für das Umfrageformular,
Template des Umfrageergebnisses* und
Template des Umfragearchivs.

*Zudem gibt es eine Unterscheidung innerhalb des Template des Umfrageergebnisses in:

"Wird angezeigt, wenn der Benutzer NICHT abgestimmt hat" und
"Wird angezeigt, wenn der Benutzer abgestimmt hat".

Wir beginnen nun mit den Vorlagen, die wir angekündigt haben:

Templates für das Umfrageformular

Header des Umfrageformulars:

<p style="text-align: center;font-size:1.4em"><b>%POLL_QUESTION%</b><p><hr><div id="polls-%POLL_ID%-ans" class="wp-polls-ans"><ul class="wp-polls-ul">

Body des Umfrageformulars: Die Vorlage bleibt unverändert.

Footer des Umfrageformulars:

</ul><hr style="margin-top: 20px"></hr>
<p style="font-size: 0.8em">Start der Umfrage im %POLL_START_DATE%</p><p style="text-align: center"><input type="button" name="vote" value="   &nbsp;ABSTIMMEN&nbsp;   " class="Buttons" onclick="poll_vote(%POLL_ID%);" /></p>
<p style="text-align: center"><a href="#ViewPollResults" onclick="poll_result(%POLL_ID%); return false;" title="">ERGEBNISSE</a></p>
</div>

Template des Umfrageergebnisses

Header des Umfrageergebnisses:

<p style="text-align: center;font-size:1.4em"><b>%POLL_QUESTION%</b><p><hr><div id="polls-%POLL_ID%-ans" class="wp-polls-ans"><ul class="wp-polls-ul">

Body des Umfrageergebnisses: Die Vorlage bleibt unverändert.
(Wird angezeigt, wenn der Benutzer NICHT abgestimmt hat.)

Body des Umfrageergebnisses: Die Vorlage bleibt unverändert.
(Wird angezeigt, wenn der Benutzer abgestimmt hat.)

Footer des Umfrageergebnisses:
(Wird angezeigt, wenn der Benutzer abgestimmt hat.)

</ul><hr style="margin-top: 20px"></hr><p style="font-size: 0.8em">Start der Umfrage im %POLL_START_DATE%</p><p style="text-align: center">Gesamtwähler: <strong>%POLL_TOTALVOTERS%</strong></p></div>

Footer des Umfrageergebnisses:
(Wird angezeigt, wenn der Benutzer NICHT abgestimmt hat.)

</ul><hr style="margin-top: 20px"></hr><p style="font-size: 0.8em">Start der Umfrage im %POLL_START_DATE%</p><p style="text-align: center">Gesamtwähler: <strong>%POLL_TOTALVOTERS%</strong></p><p style="text-align: center"><a href="#VotePoll" onclick="poll_booth(%POLL_ID%); return false;" title="">ZURÜCK ZUR UMFRAGE</a></p></div>

Ab 'Template des Umfragearchivs': Die Vorlagen bleiben unverändert.

Nachfolgend sind die CSS-Anpassungen aufgeführt. Dank der klaren Selektoren und der Vermeidung von Überschneidungen konnte auf die Verwendung von !important weitgehend verzichtet werden.

Weiterhin wurde das CSS im Child-Teme der erstellten poll-css.css-Datei eingetragen. Dies stellt eine konforme Vorgehensweise dar. Man könnte das natürlich auch im Customizer abspeichern.

/* === WP-Polls === */

/* Abstände (mittig) und Farbe */
.wp-polls {
    margin: 25px 0;
    border: 1px solid #f1f4f8; /* #c8c8c8; */
    border-radius: 6px;
    background-color: #fff; /* #F4F4F4; */
    padding: 25px 25px 15px 25px;
}

/* Die Frage */
.wp-polls b {
    font-size: 1.3rem;
}

/* Abstand Fragen + Antw. */
.wp-polls li {
    padding: 5px 0 5px 15px;
}

/* Checkbox- Radio-Buttons */
.wp-polls input[type='checkbox'] + label,
.wp-polls input[type='radio'] + label {
    cursor: pointer;
    font-size: 1.1em;
    font-family: inherit;
    font-weight: 300;
}

/* Orig. Checkbox- u. Radio-Buttons ausblenden */
.wp-polls input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    width: 100%;
}

.wp-polls input[type='checkbox']:checked,
.wp-polls input[type='checkbox']:not(:checked),
.wp-polls input[type='radio']:checked,
.wp-polls input[type='radio']:not(:checked) {
    background: transparent;
    position: relative;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

/* Checkbox- Radio-Buttons Pseudo-Elemente */
.wp-polls input[type='checkbox']:checked + label::before,
.wp-polls input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
.wp-polls input[type='radio']:not(:checked) + label::before {
    content: ' ';
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    top: 8px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease-out 0s;
}

.wp-polls input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
    border-radius: 300px;
}

.wp-polls input[type='checkbox']:hover + label::before,
.wp-polls input[type='radio']:hover + label::before {
    background: #ddd;
    box-shadow: inset 0 0 0 2px white;
}

.wp-polls input[type='checkbox']:checked + label::before,
.wp-polls input[type='radio']:checked + label::before {
    background: #0077A6;
    box-shadow: inset 0 0 0 2px white;
    transition: all 0.5s ease-out 0s;
}

/* Buttons 'Abstimung' */
.wp-polls .Buttons {
    display: inline-block;
    border: 1px solid #c8c8c8;
    background-color: #24890C;
    color: #fff;
    font-family: inherit;
    font-size: .9em;
    font-weight: 400;
    width: 250px;
}

/* Button Ergebnisse */
.wp-polls a[href="#ViewPollResults"] {
    display: inline-block;
    border: 1px solid #c8c8c8;
    background-color: #0077A6;
    padding: 8px 59px;
    color: #fff !important;
    font-family: inherit;
    font-size: .9em;
    font-weight: 400;
    text-decoration: none;
    width: 130px;
}

.wp-polls a[href="#ViewPollResults"]:hover {
    background-color: rgba(26, 82, 138, 0.8);
    color: #fff !important;
}

/* Button zurück Ergebnisse */
.wp-polls a[href="#VotePoll"] {
    border: 1px solid #c8c8c8;
    background-color: #0077A6;
    padding: 9px 25px;
    color: #fff !important;
    font-family: inherit;
    font-size: .9em;
    font-weight: 400;
    text-decoration: none;
}

.wp-polls a[href="#VotePoll"]:hover {
    background-color: rgba(26, 82, 138, 0.8);
    color: #fff !important;
}


/* Loading Spin */
.wp-polls-loading {
    margin-top: -120px;
    margin-bottom: 120px;
}

/* = WP-Polls end = */

Weitere Anpassungen wurden auf der Website vorgenommen, die sich aus der Verwendung des Dunkelmodus, des Lesemodus und Boxzilla ergeben haben. Die folgenden Stile dienen lediglich als Referenz und sind teils nicht aktiv, da die vorhandenen Stile bereits weitgehend konform sind:

/* Styles für den Poll-Button im Readermodus */
.readermode .wp-polls a[href="#ViewPollResults"] {
    padding: 11px 50px !important;
}

/* Styles für den Poll-Button im Dunkelmodus aktiviert */
.wp-dark-mode-active .wp-polls a[href="#ViewPollResults"] {
    padding: 11px 54px !important;
}

/* Styles für den Poll-Button im Dunkelmodus aktiviert und Readermodus */
.wp-dark-mode-active .readermode .wp-polls a[href="#ViewPollResults"] {
    padding: 11px 44px !important;
}

/* Styles für den Poll-Button in Boxzilla */
.boxzilla .wp-polls a[href="#ViewPollResults"] {
    padding: 11px 63px !important;
}

/* Anpassung der Checkboxen im Dunkelmodus aktiviert */
.wp-dark-mode-active .wp-polls input[type='checkbox']:checked + label::before,
.wp-dark-mode-active .wp-polls input[type='radio']:checked + label::before {
    background: #0077A6 !important;
    box-shadow: inset 0 0 0 6px #242525 !important;
}

/* Anpassung der Checkboxen im Dunkelmodus aktiviert und nicht ausgewählt */
.wp-dark-mode-active .wp-polls input[type='checkbox']:not(:checked) + label::before,
.wp-dark-mode-active .wp-polls input[type='radio']:not(:checked) + label::before {
    background-color: #242525 !important;
}

Tab 4: WP-Polls und die Tastaturnavigation

Tab 4

WP-Polls und die Tastaturnavigation

Für die Benutzererfahrung kann es weiterhin wichtig sein, dass die Tastaturnavigation integriert ist. Näheres zur Tastaturnavigation ist in diesem Beitrag zu lesen.

Das Folgende genügt, wenn der Ergebnis-Link (Vorschau) nicht berücksichtigt wird, dabei ist das nur für die JS-Datei geeignet:

(function($) {
    const enablePollKeyboardNavigation = () => {
        $('form[id^="polls_form_"]').each(function() {
            const pollAnswers = $(this).find('input[type="radio"], input[type="checkbox"]');

            pollAnswers.each(function() {
                const $input = $(this);
                const $label = $(`label[for="${$input.attr('id')}"]`);

                // Setze tabindex auf das Label für Tastaturfokus
                $label.attr('tabindex', '0');

                // Fokussierung bei Tabulator
                $label.on('focus', () => {
                    console.log('Fokus auf Label:', $label.text());
                });

                // Leertaste oder Enter-Taste zur Auswahl
                $label.on('keydown', (e) => {
                    if (e.key === ' ' || e.key === 'Enter') {
                        e.preventDefault();
                        $input.prop('checked', !$input.prop('checked')).trigger('change');
                    }
                });

                // Klick auf das Label
                $label.on('click', () => {
                    $input.focus(); // Setzt den Fokus auf das Eingabefeld, wenn das Label angeklickt wird
                });
            });
        });
    };

    $(document).ready(() => {
        enablePollKeyboardNavigation();
    });

    $(document).ajaxComplete(() => {
        enablePollKeyboardNavigation();
    });

})(jQuery);

/* --- Polls: CSS Tastaturnavigation einfach --- */
.wp-polls label:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: #e9ecef;
    padding: 2px 4px 5px 0;
}

.wp-polls .Buttons:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    padding: 10px;
}

.wp-polls a[href="#VotePoll"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    padding: 10px;
}

/* - Ende Polls: CSS Tastaturnavigation einfach - */

WP Polls, die Tastaturnavigation ist vollständig und Tabindex 0. Das folgende JavaScript ist ausschließlich für die JS-Datei geeignet:

/* --- WP-Polls: Tataturnavigation --- */

(function($) {
	const enablePollKeyboardNavigation = () => {
		$('form[id^="polls_form_"]').each(function() {
			const pollAnswers = $(this).find('input[type="radio"], input[type="checkbox"]');

			pollAnswers.each(function() {
				const $input = $(this);
				const $label = $(`label[for="${$input.attr('id')}"]`);

				$label.attr('tabindex', '0');

				$label.on('focus', () => {
					console.log('Fokus auf Label:', $label.text());
				});

				$label.on('keydown', (e) => {
					if (e.key === ' ' || e.key === 'Enter') {
						e.preventDefault();
						$input.prop('checked', !$input.prop('checked')).trigger('change');
					}
				});

				$label.on('click', () => {
					$input.focus();
				});
			});
		});

		const convertLinksToButtons = () => {
			$('a[href="#ViewPollResults"], a[href="#VotePoll"]').each(function() {
				const $link = $(this);
				const onClickAction = $link.attr('onclick');
				const buttonText = $link.text();

				const $button = $('<button type="button"></button>')
					.addClass('Buttons')
					.attr('onclick', onClickAction)
					.attr('role', 'button')
					.attr('tabindex', '0')
					.text(buttonText);

				$link.replaceWith($button);

				$button.on('keydown', function(e) {
					if (e.key === ' ' || e.key === 'Enter') {
						e.preventDefault();
						$button.trigger('click');
					}
				});

				// Setze den Fokus auf den Button, nachdem er erstellt wurde
				$button.focus();
			});
		};

		convertLinksToButtons();
	};

	const observePollChanges = () => {
		$(document).ajaxComplete(() => {
			setTimeout(() => {
				enablePollKeyboardNavigation();
			}, 100);
		});
	};

	$(document).ready(() => {
		enablePollKeyboardNavigation();
		observePollChanges();
	});

})(jQuery);

/* - Ende WP-Polls: Tataturnavigation - */

Erläuterung des JavaScript

Initialisierung und Selbstaufruf der Funktion:
- Der Code ist in eine sofort aufgerufene Funktion (IIFE) verpackt, um Konflikte mit anderen JavaScript-Bibliotheken zu vermeiden.
- jQuery wird als $ übergeben, um sicherzustellen, dass die jQuery-Funktionen korrekt aufgerufen werden können.
Funktion enablePollKeyboardNavigation:
- Diese Funktion ermöglicht die Navigation und Interaktion mit WP-Polls (Umfragen) per Tastatur.
- Die Funktion wird über jQuery aufgerufen und ist in mehrere Schritte unterteilt:
a. Identifizieren der Umfrageformulare:
- Es werden alle Formulare mit einer ID, die mit "polls_form_" beginnt, gesucht.
- Innerhalb dieser Formulare werden alle Eingabeelemente vom Typ radio und checkbox (Umfrageantworten) identifiziert.
b. Zuweisung von tabindex zu Labels:
- Jedes zu einem Eingabeelement gehörende Label (<label>) erhält ein tabindex-Attribut mit dem Wert 0, um es in die Tabulatorreihenfolge des Browsers einzufügen.
c. Fokus-Event für Labels:
- Beim Fokussieren eines Labels wird eine Nachricht in der Konsole ausgegeben, die den aktuellen Text des Labels anzeigt.
d. Verarbeiten von Tastaturereignissen (keydown):
- Wenn die Leertaste (Space) oder die Enter-Taste gedrückt wird, wird das Standardverhalten verhindert.
- Das zugehörige Eingabeelement (input) wird umgeschaltet (gecheckt/ungecheckt) und das change-Event wird ausgelöst.
e. Click-Event für Labels:
- Beim Klicken auf das Label wird das zugehörige Eingabeelement fokussiert.
Funktion convertLinksToButtons:
- Diese Funktion wandelt bestimmte Links in Schaltflächen (Buttons) um, um die Tastaturnavigation zu verbessern.
- Es werden Links mit den Zielankern #ViewPollResults und #VotePoll ausgewählt.
a. Ersetzen der Links durch Buttons:
- Die Links werden durch Buttons ersetzt, wobei deren onclick-Event und Text beibehalten werden.
- Die Buttons erhalten ein role="button"-Attribut und tabindex="0" für die Tastaturnavigation.
b. Verarbeiten von Tastaturereignissen (keydown):
- Wenn die Leertaste (Space) oder die Enter-Taste gedrückt wird, wird das Standardverhalten verhindert und das click-Event des Buttons ausgelöst.
c. Fokus auf den neuen Button setzen:
- Nach der Erstellung wird der Fokus auf den neuen Button gesetzt.
Funktion observePollChanges:
- Diese Funktion beobachtet Änderungen auf der Seite, die durch AJAX-Anfragen ausgelöst werden.
- Nach dem Abschluss einer AJAX-Anfrage wird enablePollKeyboardNavigation nach einem kurzen Timeout von 100 Millisekunden erneut aufgerufen, um sicherzustellen, dass neu hinzugefügte Inhalte auch die Tastaturnavigation unterstützen.
Dokument-Ready-Event:
- Beim Laden des Dokuments ($(document).ready) werden die Funktionen enablePollKeyboardNavigation und observePollChanges aufgerufen, um die Tastaturnavigation zu aktivieren und Änderungen in den Umfragen zu überwachen.

Zusammengefasst: Der Code verbessert die Barrierefreiheit der WP-Polls, indem er die Navigation und Interaktion mit Umfrageelementen per Tastatur ermöglicht und Links in leicht zugängliche Buttons umwandelt.

Folgendes mit spezifischen Tabindex, hier muss nicht nur etwas anders als auch der Tabindex anders gesetzt werden. Das Script ist nur für die JS-Datei geeignet.

/* --- WP-Polls: Tataturnavigation spez. Tabindex --- */

(function($) {
	const enablePollKeyboardNavigation = function() {
		// Navigation für Poll-Labels und -Inputs aktivieren
		$("form[id^=\'polls_form_\']").each(function() {
			const pollAnswers = $(this).find("input[type=\'radio\'], input[type=\'checkbox\']");

			pollAnswers.each(function() {
				const $input = $(this);
				const $label = $("label[for=\'" + $input.attr("id") + "\']");

				$label.attr("tabindex", "1");

				$label.on("focus", function() {
					console.log("Fokus auf Label:", $label.text());
				});

				$label.on("keydown", function(e) {
					if (e.key === " " || e.key === "Enter") {
						e.preventDefault();
						$input.prop("checked", !$input.prop("checked")).trigger("change");
					}
				});

				$label.on("click", function() {
					$input.focus();
				});
			});
		});

		const convertLinksToButtons = function() {
			// Links zu Buttons konvertieren
			$("a[href=\'#ViewPollResults\'], a[href=\'#VotePoll\']").each(function() {
				const $link = $(this);
				const onClickAction = $link.attr("onclick");
				const buttonText = $link.text().trim();

				const $button = $("<button type=\'button\'></button>")
					.addClass("Buttons")
					.attr("onclick", onClickAction)
					.attr("role", "button")
					.attr("tabindex", "1")
					.html(buttonText);

				$link.replaceWith($button);

				$button.on("keydown", function(e) {
					if (e.key === " " || e.key === "Enter") {
						e.preventDefault();
						$button.trigger("click");
					}
				});

				$button.focus();
			});
		};

		const addTabIndexToVoteButton = function() {
			// Abstimmungsbutton speziell behandeln
			$("input[type=\'button\'][name=\'vote\']").each(function() {
				$(this)
					.attr("tabindex", "1") // tabindex hinzufügen
					.on("keydown", function(e) {
						if (e.key === " " || e.key === "Enter") {
							e.preventDefault();
							$(this).trigger("click");
						}
					});
			});
		};

		convertLinksToButtons();
		addTabIndexToVoteButton();
	};

	const observePollChanges = function() {
		$(document).ajaxComplete(function() {
			setTimeout(function() {
				enablePollKeyboardNavigation();
			}, 100);
		});
	};

	$(document).ready(function() {
		enablePollKeyboardNavigation();
		observePollChanges();
	});

})(jQuery);

/* - Ende WP-Polls: Tataturnavigation spez. Tabindex - */

Folgendes ist sehr spezifisch, so wie wir es hier eingepflegt haben. Das steht im Zusammenhang mit dem Pop-up, das immer solche Umfragen anbietet. Hier muss nicht nur etwas anders als auch der Tabindex anders gesetzt werden.

Das folgende ist für die functions.php geeignet und somit ist das Script auch gezielt anwendbar:

/* === poll === */

function custom_wp_polls_script() {
    // Definiere die IDs der Beiträge und Seiten, die ausgeschlossen werden sollen
    $excluded_post_ids = array(123); // Ersetze diese IDs mit den IDs der Beiträge, die ausgeschlossen werden sollen
    $excluded_page_ids = array(456, 789); // Ersetze diese IDs mit den IDs der Seiten, die ausgeschlossen werden sollen

    // Hole die aktuelle ID
    $current_id = get_the_ID();

    // Wenn die aktuelle ID in den ausgeschlossenen IDs enthalten ist, verlasse die Funktion
    if (in_array($current_id, $excluded_post_ids) || in_array($current_id, $excluded_page_ids)) {
        return;
    }

    echo '
    <script>
    /* --- WP-Polls: Tastaturnavigation spez. --- */
    (function($) {
        const enablePollKeyboardNavigation = function() {
            // Navigation für Poll-Labels und -Inputs aktivieren
            $("form[id^=\'polls_form_\']").each(function() {
                const pollAnswers = $(this).find("input[type=\'radio\'], input[type=\'checkbox\']");

                pollAnswers.each(function() {
                    const $input = $(this);
                    const $label = $("label[for=\'" + $input.attr("id") + "\']");

                    $label.attr("tabindex", "1");

                    $label.on("focus", function() {
                        console.log("Fokus auf Label:", $label.text());
                    });

                    $label.on("keydown", function(e) {
                        if (e.key === " " || e.key === "Enter") {
                            e.preventDefault();
                            $input.prop("checked", !$input.prop("checked")).trigger("change");
                        }
                    });

                    $label.on("click", function() {
                        $input.focus();
                    });
                });
            });

            const convertLinksToButtons = function() {
                // Links zu Buttons konvertieren
                $("a[href=\'#ViewPollResults\'], a[href=\'#VotePoll\']").each(function() {
                    const $link = $(this);
                    const onClickAction = $link.attr("onclick");
                    const buttonText = $link.text().trim();

                    const $button = $("<button type=\'button\'></button>")
                        .addClass("Buttons")
                        .attr("onclick", onClickAction)
                        .attr("role", "button")
                        .attr("tabindex", "1")
                        .html(buttonText);

                    $link.replaceWith($button);

                    $button.on("keydown", function(e) {
                        if (e.key === " " || e.key === "Enter") {
                            e.preventDefault();
                            $button.trigger("click");
                        }
                    });

                    $button.focus();
                });
            };

            const addTabIndexToVoteButton = function() {
                // Abstimmungsbutton speziell behandeln
                $("input[type=\'button\'][name=\'vote\']").each(function() {
                    $(this)
                        .attr("tabindex", "1") // tabindex hinzufügen
                        .on("keydown", function(e) {
                            if (e.key === " " || e.key === "Enter") {
                                e.preventDefault();
                                $(this).trigger("click");
                            }
                        });
                });
            };

            convertLinksToButtons();
            addTabIndexToVoteButton();
        };

        const observePollChanges = function() {
            $(document).ajaxComplete(function() {
                setTimeout(function() {
                    enablePollKeyboardNavigation();
                }, 100);
            });
        };

        $(document).ready(function() {
            enablePollKeyboardNavigation();
            observePollChanges();
        });

    })(jQuery);
    /* - Ende WP-Polls: Tastaturnavigation spez. - */
    </script>';
}
add_action('wp_footer', 'custom_wp_polls_script');

/* = Ende Polls = */

Was wurde geändert?

Escape von Anführungszeichen:
- Innerhalb des JavaScript-Codes wurden die einfachen Anführungszeichen (') in doppelten Anführungszeichen (") umschlossen und umgekehrt.
- Dies wurde speziell in den jQuery-Selektoren und Attributen ($("form[id^='polls_form_']") etc.) angepasst.
Verwendung von doppelten Anführungszeichen für PHP-Strings:
- In der PHP echo-Anweisung wurden die äußeren Anführungszeichen in einfache Anführungszeichen geändert, damit doppelte Anführungszeichen im JavaScript frei zu verwenden sind, ohne sie zu escapen.

Das CSS als Vorschlag:

/* --- Polls: Tastaturnavigation --- */

/* Fokus-Stil für Labels in WP-Polls-Formularen */
.wp-polls label:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: #e9ecef;
    padding: 2px 4px 5px 0;
}

/* Fokus-Stil für alle Buttons mit der Klasse 'Buttons' in WP-Polls */
.wp-polls .Buttons:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    padding: 10px;
}

/* Fokus-Stil für den Link zum Anzeigen der Umfrageergebnisse */
.wp-polls a[href="#ViewPollResults"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    padding: 10px;
}

/* Fokus-Stil für den Link zur Abstimmung in der Umfrage */
.wp-polls a[href="#VotePoll"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    padding: 10px;
}

/* Allgemeiner Stil für alle Buttons mit der Klasse 'Buttons' */
.wp-polls button.Buttons {
    background: none !important;
    color: #4a1414 !important; 
}

/* Optional: Stil beim Hover */
.wp-polls button.Buttons:hover {
    color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5) !important;
}

/* Optional: Stil beim Fokussieren */ 
button.Buttons:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5) !important;
}

/* - Ende Polls: Tastaturnavigation - */

Und Danksagung an ChatGPT!