Umfrage

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

Bild evondue
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Advanced Editor Tools – ist so klasse!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
“Advanced Editor Tools – ist das ausgezeichnete!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Advanced Editor Tools – ist so sehr gut !”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Advanced Editor Tools – und tut sehr gut!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
“Advanced Editor Tools – ist so fabelhaft!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Advanced Editor Tools – ist de luxe!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Advanced Editor Tools – ist so fein!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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

https://wordpress.org/plugins/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 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.

WP-Polls. – wie gefällt es dir?
Bis zu zwei Antworten in einem.



Start der Umfrage im Juni 2022

ERGEBNISSE

Wird geladen ... Wird geladen ...

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

Tab 2: Extras zum WP-Polls!

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 Poll-Optionen sollten im Allgemeinen so belassen werden, wie sie standardmäßig eingestellt sind.

  • 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. Beachte jedoch, dass du dies nach einem Update des Plug-ins erneut tun musst. (Updates für dieses Plug-in sind normalerweise nicht häufig.)

  • In der Option Logging Method kannst du ein Cookie mit einer bestimmten Dauer in Sekunden einstellen, um sicherzustellen, dass jeder Benutzer nur einmal abstimmen kann. Beispiel:
    • 2592000 s sind 30 Tage
    • 5184000 s sind 60 Tage
    • 7776000 s sind 90 Tage
  • Beachten auch, dass du bei der Option Poll Archive URL eine URL wie https://deinedomain.at/pollsarchive verwenden kannst.

Wenn du der Anleitung des Plug-ins folgst, kannst du die Ergebnisse der Umfragen unter pollsarchive einsehen. Dies kann sinnvoll sein, wenn bestimmte Umfragen abgelaufen sind und nur noch die Ergebnisse angezeigt werden sollen.

  • Schau dir mal die Seite https://wegerl.at/pollsarchive-aktiv/ an, da kannst du nochmal abstimmen und auch sehen, wie andere Leute gevotet haben. Wir freuen uns immer noch über deine Stimme!

WP-Polls – Hol dir das Meinungsbild der Community!

Poll Templates

Poll-Templates sind im Grunde so zu belassen, wie sie sind, können aber auch individuell angepasst werden. Dabei sollte jedoch berücksichtigt werden, dass Änderungen zeitaufwendig sein können.

Es ist wichtig zu beachten, dass es einen Unterschied zwischen Poll-Voting-Form-Templates und Poll-Result-Templates gibt. Poll-Result-Templates können weiterhin in “Displayed When The User HAS NOT Voted” und “Displayed When The User HAS Voted” unterteilt werden:

  • Poll Voting Form Templates vs. Poll Result Templates.
  • Und des letzten von Poll Result Templates ist weiter der Unterscheidung von
    • “Displayed When The User HAS NOT Voted” und
    • “Displayed When The User HAS Voted”.

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

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. Zusätzlich könnte es hilfreich sein, zu erfahren, wie die Richtung der Fragen in einer Umfrage variiert werden kann. Hier ist ein PDF-Link, den du lesen könntest: (Beachte, dass die verlinkte Website (uni-koeln.de) eine HTTP-Website ist und dein Browser möglicherweise eine Sicherheitswarnung anzeigen könnte).

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 ich verwende es nicht, da ich die Umfrage im Boxzilla Pop-up auf meiner Website platziert habe. 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.

Erstellen Sie interaktive Umfragen mühelos mit WP-Polls

Tab 2: Extras zum WP-Polls!

Extras zum WP-Polls!

Extras zum WP-Polls!

Im Grunde muss das Poll-Formular über das Dashboard unter Polls → Poll Options und Poll Templates angepasst werden. Hier sind jedoch auch Beispiele für CSS und das Formatieren des Erstellungsdatums vorhanden.

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.

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: 5px;
}*/

/* 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

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: absoluteoverflow:hidden versieht, dann ist das Element noch anklickbar, aber nicht sichtbar, wenn denn auch das <label> drumherum ist.

Pr. WP-Freund

Zweites Beispiel

Ich möchte 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.

Ich 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 ich wollte nur den Monat und das Jahr (‘Juli 2022′) darstellen. Obwohl ich die Plugin-Dateien durchsucht hatte, konnte ich nicht herausfinden, wo ich das Format ändern konnte. Schließlich bat ich einen WP-Freund um Hilfe, der mir schnell weiterhelfen konnte.

Um das Datum im WP-Polls-Plugin zu formatieren, musste ich sowohl in der wp-polls.php-Datei entsprechende Anpassungen vornehmen als auch folgenden Code in der functions.php-Datei des Themes hinzufügen.

… der nach einem Plugin-Update erneut durchgeführt werden muss. Verwende diesen Code als Merkzettel für sich selbst.

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 können Sie 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.

Die Form des Datums bei den Fragen.
Die Form des Datums bei den Antworten.
  • 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

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:

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

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

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 an dem Filter ist, dass hier bedenken muss, dass das sprintf nicht kaputtgeht, weil es ein %s vorsieht, an zweiter Stelle. Hier müsste er also noch mehr machen, damit das klappt. So etwas könnte womöglich helfen … somit dann siehe weiter.)


Vielen Dank  🙂  an unseren WP-Freund für diesen Hack! Allerdings sollte ich 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 ich im Titel eine Anfrage dazu stellen: ‘Wie soll ich vorgehen, um das Datum zu formatieren?

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


Aktualisiert im Jahr 2023-April