Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Das welches des CMS WordPress der Erfolg ist, weil es lebt. Gemeint ist das so von Kommentar über Feedback-Plug-in hier auch zu einem Umfrage-Formular. – da ist das Umfrage-Tool "WP-Polls" von Ideal. Für kompetente Admins sind die Einstellungen zur Umfrage die reine Freud. Anders ist das dem Beginn, aber in Einarbeitung dann für alle sehr erfolgreich.
Anmerkung: Der Anwendung von Umfragen ist hier das Plug-in WP-Polls. Für Geübte ist es der Einstellung intuitiv und das reine Vergnügen. Nicht nur der Funktion als auch des CSS ist das ganz individuell. Sonst empfehle ich das Plug-in Poll Maker. … Und für sehr gehobenen Anspruch dann das auf TotalSuite.
Jetzt erst mal für die Frage im Nachhinein … und ist gleich mal das Beispiel. – das Plug-in WP-Polls. Allerdings des Designs ist die Frage ∴nicht∴ der Fokus.
Wird geladen ...Für Moderne ist das Plug-in WP-Polls
Das ist für 'Beginne' als auch für Autoren von Erfolg.
Ich habe mich nach 'Modern Polls' jetzt mit Neuem, anderen Polls befasst, und ja, da blieb dann WP-Polls von Lester Chan. Das Plug-in ist, welches sich auch der Fortgeschrittene wünscht. So 240 KB und perfekt soweit.
Poll Options
Da ist weitgehend so zu belassen, wie dort die Einstellung ist.
- Der Poll Bar Style sind dann auch individuell.
Wer die Balken von Ergebnissen lieber bunt haben möchte, so ist schon mal in den FAQ des Plug-ins so Beispiel dabei.
.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 }Das ist dann in der poll-css.css am Ende der Datei zum Hinzufügen. – Obacht, denn derart ist das nach Plug-in Update zu erneuern!
- Bei Logging Method gibt es u. a. das Cookie die Dauer in Sekunden, sodass nur einmal abzustimmen ist. Bsp
- 2592000 s sind 30 Tage
- 5184000 s sind 60 Tage
- 7776000 s sind 90 Tage
- Und bei Poll Archive URL ist dann so etwa https://deinedomain.at/pollsarchive
Des Polls von 'pollsarchive' wie dem Beschrieb des Plug-ins zu folgen ist, so sind dann nur die Ergebnisse zu sehen. Das hat Sinn, wenn auch so Umfragen dabei, die ein Ablaufdatum haben und somit nur zum Ansehen der Ergebnisse sind.
- Beispiel, sonst genügt, wie das folgend zu sehen und dort auch zum Abstimmen ist, siehe Pollsarchive. – dein Votum ist nach wie vor sehr gefragt.
Poll Templates
Das ist im Grunde auch so zu belassen, ist aber auch ganz individuell herzustellen. Aber so Änderungen können zeitaufwendig werden. Dabei ist immer auch auf folgendes zu achten:
- 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
Die Umfrage so formuliert, dass für jederfrau*mann verständlich ist, so der Erfolg der Abstimmung. Des Erfolgs sind eher so Umfragen, wenn die Umfrage so zum Allgemeinen ist.
Nachlese wie das der Skalen von Antworten
- Tipps für die richtigen Skalen
- Antwortskalen (PDF)
- Auch so zum Durchlesen: Häufig wird die Richtung der Fragen variiert (PDF). (Des Links ist HTTP-Website, daher folgt Browsers evtl. die Nachfrage von wegen Sicherheit. Die Website ist uni-koeln.de)
Edit Poll
Nach der Erstellung von Umfrage können diese auch editiert werden. Selbst die Ergebnisse sind so mal einstellbar. Bsp war das hier zum Übertrag der Umfragen von anderem Poll-Plug-in praktikabel. Ex- und Import von Umfragen ist nicht vorgesehen.
Widget WP-Polls
Perfekt Widget gibt es auch, aber ist hier nicht in Anwendung. Nicht in Anwendung, weil ich die Umfrage im Boxzilla Pop-up zum Besuch der Website habe. Und eben! – so der aktuellen Umfrage sind dann zwei identische IDs auf einer Seite, das schneidet sich. Sonst ist das Widget ideal in der Seitenleiste am besten 'Above the Fold’*.
*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.
Extras zum WP-Polls!
Im Grunde ist des Polls das Formular über Dashboard / Polls → Poll Options und Poll Templates zu arrangieren. Hier aber sind so Beispiele von CSS und weiter als das Erstellungsdatum zu formatieren ist.
CSS für WP-Polls
Das CSS ist mal das Folgende für das Umfrage-Formular und dann ist das mit den Checkbox- u. Radio-Buttons. Also das ist des CSS in zwei Schritten.
Erster Schritt, das Umfrage-Formular
/* === WP-Polls === */
/* Loading Spin */
.wp-polls-loading {
margin-top: -120px;
margin-bottom: 120px;
}
/* Abstände (mittig) und Farbe */
.wp-polls {
margin: 25px 0;
background-color: #F4F4F4;
padding: 25px 15px 15px 15px;
}
/* Abstand Fragen + Antw. */
.wp-polls li {
padding: 5px 0 5px 15px;
}
/* Ergebnis Balken Abstand, Bedingung so in margin */
/*.wp-polls .pollbar {
margin-bottom: 5px;
}*/
/* Button 'Abstimung'*/
.wp-polls .Buttons {
border:1px solid #c8c8c8;
background-color: #24890C;
color: #fff;
font-family: inherit;
font-size: .9em;
font-weight: 400;
width: 222px;
}
/*.wp-polls .Buttons:hover {
border:1px solid #c8c8c8;
background-color: #4A80EB;
color: #fff;
font-family: inherit;
font-size: .9em;
font-weight: 400;
width: 50%
}*/
/* 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: .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: .9em;
font-weight: 400;
text-decoration: none;
}
.wp-polls a[href="#VotePoll"]:hover {
background-color: rgba(26, 82, 138, 0.8);
}
/* = WP-Polls end = */- 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 Schritt, 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 der Radio-Button und Checkbox habe ich im Zusammenspiel 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,.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
Hinweisen möchte ich auf das CSS der Geige. Ausgehend ist der Link von "stack overflow" im Titel Wie ist die Größe des Kontrollkästchens mit CSS zu ändern?
Den Link der Geige und selbiger Vorlage zu folgen mag die Fragestellung aufwerfen, wie kann ich den Abstand zwischen den Radiobuttons und dem Text der Fragen erweitern.
Also hier ist nur mit Padding zu arbeiten und allen left dasselbe zu geben. Bspw left: -1.8em;
Hier noch so Beispiel der Vorlage wie das des CSS. Also inkl. dem Abstand oben, damit es mehr mittig ist:
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 zum Anzeigen des Erstellungsdatums bezieht sich auf Dashboard / Polls → Poll Templates des von
%POLL_START_DATE%
Nun, das hier ist der Frage zum Formatieren des Erstellungsdatums von Poll. Samt Umsicht ist es mir nicht gelungen, das Erstellungsdatum zu formatieren. Das ist bspw 1. Juli 2022 @ 0:00 und es sollte aber nur der Monat und das Jahr Juli 2022 sein. Des Plug-ins Dateien habe ich schon gesehen, aber das nicht gefunden, wo das zu formatieren ist. Müsste ja in einer PHP sein. Hat jemand ’ne Idee? – egal, ein WP-Freund hat da ganz schnell geholfen.
Das jetzt folgend ist so, wie das für den Entwickler zum Handhaben ist. So habe ich das erst mal verstanden, als mir der WP-Freund zur Fragestellung mit gesamten PHP geholfen. So angewendet und deshalb so beherzt im Beschrieb.
Das ist dann so im Core des Plug-ins, der wp-polls.php mithin Codes zur Funktion in functions.php, aber nun …
Das für Entwickler von WP-Polls
Für Entwickler von WP-Polls. – Folgendes ist ein Hack
… der so, nach Plug-in Update zu wiederholen wäre. Und nur so Merkzettel für sich da.
Dashboard / Plugins / Plugin-Datei-Editor. WP-Polls.
Die Stelle ist in der wp-polls.php Datei der Zeile 437 und 579. Leider gibt es hier keinen Filter, um die Formatierung zu ändern, allerdings ist Folgendes zu versuchen.
Werdegang des PHP von weiter unterhalb: Der Autor des Plugins müsste hier einen Filter einbauen, damit man das Format verändern kann. Ein Beispiel für so einen Filter könnte so aussehen:
$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.
WP-Polls wp-polls.php
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.
Obacht zum Eintrag des nun folgendes PHP. Sich nicht von wegen der Zeilen-Nummer irritieren lassen, wenn der Code oberhalb schon eingetragen ist, dass dann weiter unterhalb ist, gel. Oder besser von unten nach oben editieren, also erst mal das der Zeile 579 und dann 437. – ja und 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 würde in des Themes functions.php noch zu machen sein:
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
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!
Des Hacks vielen Dank unserem WP-Freund! – und da sollte ich wohl mal im Support von WP-Polls dem Autor so Anfrage für den Filter … denn so wie das jetzt in der wp-polls.php würde das nach Plug-in Update weg. – wenn nur sonst wem interessierte das … also mal so vorfühlen im Titel Wie soll ich vorgehen, um das Datum zu formatieren?
Aktualisiert im Jahr 2022-Oktober
