Pixelbart2

Das Feedback-Plug-in Helpful

Das Piktogramm des Feedback-Plug-ins Helpful. … schattiert.

Der Kommentar zur Diskussion scheint im Heute nicht mehr so genützt. Denn es ist gern ein Abstand vom Kommentieren zu erkennen. … Sei es von wegen, dass das Geschriebene nur unter Umständen zu ändern oder zu widerlegen ist? – bzw. die Zeit nicht da ist.  … Das mal ganz ehrlich :-). So bedarf auch ein Beitrag im Kommentar wenig Anmerkung bzw. keiner Debatte, oder sind diese schon geschlossen? So ist aber eine vom Leser netten Bewertung durch das Feedback-Plug-in Helpful sehr gefragt! Und der Autor fühlt sich gut angenommen, er kann sich in Ruhe von Fragen annehmen oder er muss auch Kritik hinnehmen. … So ist das in der Barrierefreiheit des Feedback-Plug-ins Helpful. Dazu möchte ich gleich auch auf ein Features zu den Feedbacks weisen. Nämlich das zu den Einstellungen von Bereits abgestimmt ↓.

Der erste Eindruck

Wie hier die Gunst der Stunde mit Stern Bewertung ist auf das Feedback-Plug-in Helpful hinzuweisen. Diese Art von Plug-in ermöglicht nur zwei Antworten. In etwa der Frage: War der Beitrag hilfreich? – mit JA oder NEIN zu antworten. Dabei sind individuelle Texte in jeder der Einstellungen ganz leicht zu handhaben.

Vorerst zu den Bewertungen des Plug-ins von Kevin P. … Mittlerweile ist es auf sehr seriösen Websites zu sehen.

Für den Anwender ist das Plug-in 'Helpful' von Kevin P. Alias Pixelbart, der Funktion von Plug-in 'Rate my Post' ähnlich. Aber dem Output von 'Rate my Post sind es in 'Helpful' gerade mal 10 % an Ressource.


Dem Tab-Menü geht es kurz zu den Einstellungen. Dem Tab 'Meine FAQ' ist u. a. das zum Feedback-Formularhelpful-heart von den Meta aus. Im CSS sind ein paar Beispiele, wie es sich hier so ergeben hat.

Einstellungen

Die Einstellungen, das Anpassen

Das Plug-in Helpful ist sehr gut vorbereitet. Die 'Einstellungen' lassen keine Wünsche offen. Infolge deiner 'Anpassung' gereicht es zur Vollendung. Wobei dies alles sehr übersichtlich und sich selbst erklärend ist.

Datails

… das ist sich selbst erklärend.

Texte

Das ist weitgehend sich selbst erklärend. Bleibt noch das mit …

Bildschirmfoto 2020-09-17 um 18.23.23-2

Diese Schnipsel sind im Text einzufügen, damit man nicht per Hand die Anzahl der Stimmen den Texten einfügen muss. … wenn man das so möchte.

Daher und so lässt sich mit {pro} die Anzahl der positiven Stimmen anzeigen. Also die Anzahl der Pro-Stimmen für den Beitrag. Das ist für die Textabschnitte von Feedback Helpful, nicht sonst wo. So kannst du in dem Textabschnitt "Nach der Abstimmung (Pro)" schreiben:

Bildschirmfoto 2020-09-17 um 18.07.24

Einstellungen / Feedback

Unter Helpful →Einstellungen → Feedbacks ist dort im Reiter 'Bereits abgestimmt' das Häkchen sehr hervorzuheben.

Das Features ist wie gleich bei den Kommentaren, um evtl. nochmals einen Eintrag zu machen. So ist bei Wiederkehr zur selben Seite auch im Nachhinein das Sagen möglich.

So folgt der Website in Neuladung oder zur Wiederkehr dann das Formular:

Bildschirmfoto 2020-09-16 um 21.46.21
Das Bild als Double
Somit die Frage … Wie sind in WordPress die Kommentare zu deaktivieren?
Sofern …
Sofern man von da an die Funktion der WP Kommentare abschalten möchte. Dashboard / Einstellungen / Diskussion → 'Standardeinstellungen für Beiträge'. Dort das Häkchen bei 'Erlaube Besuchern neue Beiträge zu kommentieren', das ist zu entfernen. Demnach ist das für jeden Beitrag individuell zu ändern. Zum gesamten entfernen der Kommentare ist im Netz zu finden. Da ist das im Titel WordPress Kommentare deaktivieren so lesenswert wie Wie man Kommentare in WordPress deaktiviert. Weiter ist noch auf so Plug-in wie Assets CleanUp: Page Speed Booster hinzuweisen. Da ist auch das mit der kompletten Deaktivierung von Diskussion mit dabei.

Der Feedbacks im WP-Editor

Im Backend WP-Editor. Unterhalb im Box-Bereich können dem Beitrag die Bewertungen zurückgesetzt werden. Hier sind auch die Feedbacks des Beitrags ersichtlich. Die können dort abgearbeitet auch gelöscht werden. Dasselbe ist in Übersicht aller Feedbacks über Dashboard → Helpful → Feedback zu sehen und bearbeiten. Weiter ist für das Dashboard auch ein sehr schönes Widget zu aktivieren.

Theme

Neben der Vorlage 'Blank' für den Kreativen, sind sechs Theme da. Dies alles ist über den Customizer, s. dort 'Helpful'.

Am besten ist, der Einstellungen und Anpassungen sich mal freien, halben Tag gemütlich zu befassen.

System

Unter System finden sich das mit Cache und so. Das mit dem Cache will aber erst mal etwas erklärt sein. Das Tag dort heißt 'Transients API von WordPress'.

Kevin P. im Interview
Herr Kevin! – bitte: Was ist die Transients API von WordPress?

Die Transients API von WordPress speichert bspw. große Abfragen in der Datenbank ab. Wenn man jetzt bspw. alle Beiträge auf einem Blog abruft, dann wird für jeden Beitrag ein Abruf in der Datenbank generiert.

Wenn man die Beiträge aber alle einmal abruft und dann in der Datenbank abspeichert. So muss man nur noch einmal das Ergebnis abrufen. Also wenn man 50 Beiträge hat und alle in einer Option speichert, dann hat man nur noch eine Abfrage anstelle von 50 Abfragen.

Inwiefern ist das im  Feedback-Plug-in Helpful?

Helpful nutzt das dann bspw. für das Dashboard Widget. Da werden die Voten nicht alle einzeln abgerufen, sondern einmal alle und dann gespeichert. Das verbessert die Ladezeit im Adminbereich. Jedes Mal, wenn jemand eine Stimme mit Helpful abgibt, wird der Cache bzw. der transient gelöscht und neu generiert.

Und nun! – wie ist das denn mit dem Cache?

Die Transient-API ist eine API von WordPress, mit der man Inhalte "cachen" kann.

Wenn du viele Stimmen hast (+1000), dann kann dir der Cache helfen. Bis dahin ist das aber nicht wichtig. Womöglich ist dein Server bzw. deine Datenbank auch so schnell, dass du erst nach +100.000 Stimmen einen Cache benötigst. Du machst auf jeden Fall nichts falsch, wenn du die Option aktivierst. Du wirst nur bei wenig Stimmen keinen Unterschied merken. Also ob aktiviert oder nicht.

… noch ein kurzes Schlusswort zum Tag

Das schöne an der Transient API ist, dass sie von Haus aus in WordPress integriert ist. Schade ist: So manch Entwickler von Plug-ins wissen das nicht…

Da ich ja WordPress-Entwickler bin, muss ich die Funktionen von WordPress kennen. Deshalb nutze ich auch immer gern die Dinge von WordPress, bevor ich eigene Dinge baue oder auf Externes greife. Bspw. sind das auch die Diagramme und Tabellen innerhalb von Plug-in Helpful.

Danke! – lieber Kevin. Das Interview hat sehr geholfen.

 

Meine FAQ

Meine FAQ

Reihung der Plug-in Helpful und WordPress Reladet Posts

Der Reihung von Plug-in 'Helpful' und Plug-in 'WordPress Related Posts' ergehen die 'Related Posts' über das 'Helpful'.

Insofern stellt sich das 'Feedback Helpful' unter die 'Reladet Posts'. Da mag es Geschmacksache sein, die Reihung umzudrehen. Dies geht nicht aus dem Core des Plug-ins 'Helpful' hervor. Darum ist hier der Code für die functions.php gist.github.com/pixelbart/*.

Bildschirmfoto 2020-09-17 um 23.39.40
Das Bild als Double

Dazu ist dann noch in den Einstellungen des Plug-ins 'Wordpress Reladet Posts' unter Advanced settings → Other Settings bei 'Auto Insert Related Posts' das Häkchen zu entfernen.

* Für ein anderes Related-Post-Plug-in lässt sich der Code auch anpassen. Sofern des Plug-ins dies sich in den Einstellungen, wie in 'Wordpress Related Posts', zu arrangieren ist.

Anker zum Feedback Plug-in Helpful

Für den Besucher ist es sehr schick und konform bei den Meta einen Link zum Feedback-Helpful. Sei es neben wie SCHREIBE EINEN KOMMENTAR oder auch stattdessen. Siehe hier:
Bildschirmfoto_meta-feedbackHierzu ist nun vom Autor des Plug-ins die Programmierung bereitgestellt. Auf GitHub im Titel Hilfreiches Plugin: Anker zum Formular. Also dieser Code ist erst mal in die functions.php einzufügen. Wobei ich da den Code von unterhalb empfehle: "Ohne ID des Beitrags". Von dort den Inhalt in die functions.php einfügen."

Die Snippets zur functions.php im Plug-in Code Snippets abspeichern. Dazu ist das zur Verwaltung der Codes als auch der Schutz bei Theme-Update.

Dies funkt dann auch so mit dem Shortcode [helpful_anchor]. Der Website direkt wie mit Shortcode ist das am Besten im Widgetbereich einzubringen.

… Der Anker im Text Widget

Den Shortcode in das 'Text' Widget einfügen.

Bildschirmfoto_Send feedback

  • Das ist für manch Theme wie Twenty Seventeen so das…
  • Den Shortcode kann man auch das 'font-size' anpassen.
  • Das andere mit dem Icon von Helpful, das ist da gleich weiter unten.

Anders, den Shortcode jeweilig dem Beitrag einfügen. Diese Gangart ist nicht so zu empfehlen. Hingegen ist sehr elegante…

Im Theme platzieren

Vielmehr ist es, wie oben schon hervorgehoben, die Verlinkung zum Feedback-Formular von den Meta aus.

Dazu ist dann der Code <?php echo do_shortcode( '[helpful_anchor]' ); ?>.

Mit diesem Code ist das im Theme einzufügen. Und im Netz heißt das dann gern, "irgendwo in deinem Theme" :-) Aber bspw. für die Meta im Theme Twenty Fourteen ist das in der content.php. Mit diesem Code:

<span class="entry-meta">
<?php echo do_shortcode( '[helpful_anchor]' ); ?>
</span>

Das Theme Twenty Fourteen template.php , nach unten scrollen.

<header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
<div class="entry-meta">
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
</div>
<?php
endif;

if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
endif;
?>

<div class="entry-meta">
<?php
if ( 'post' == get_post_type() ) {
twentyfourteen_posted_on();
}

if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
<?php
endif;

edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?>
<span class="entry-meta">
<?php echo do_shortcode( '[helpful_anchor]' ); ?>
</span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->

 

Nun des Moments ist das so: Nach einem Theme Update ist dort der Code evtl. zu erneuern. Mal sehen, ob der Autor auch einen Code erstellt, der das allein aus der Theme functions.php bringt bzw. ob das von wegen der Themes möglich ist.

  • Demnach ist das für uns als Merkzettel zum nächst Theme Update. Das mit dem Code ist dann ja fix.
Das Piktogramm von Helpful zum FEEDBACK helpful-heart

Das Beispiel hier ist ein PNG 2 KB. Also das Icon da mit Rechtsklick auf den Comp. downloaden. So bleibt, nach dem Download das 'helpful-heart.png' in die WP-Mediathek zu laden.

Sodann im WP-Editor öffnen, um die Größe und die Margins einzurichten. … hier das PNG Icon schattiert. Das hat 9 KB.

FEEDBACKBildschirmfoto_Send feedback

Das Icon positionieren
  • Vergewissere dich, dass die Ausrichtung auf 'Keine' steht.
  • Die Größe, die passt
  • und die Margins einrichten.

Und wie sind die 'margins' komfortabel einzurichten? Da weise ich das Plugin Advanced Image Styles.

Von dort im Editor Text-Modus ist der Code vom Icon dann zu kopieren und in das Snippet in der functions.php zu editieren:

/**
* Fügt einen neuen Shortcode [helpful_anchor] hinzu.
*
* @return string
*/
add_shortcode( 'helpful_anchor', function() {
global $post; 
$id = 'helpful-' . $post->ID;
$permalink = get_the_permalink( $post ) . '#' . $id;
return sprintf( '<a href="%s">%s</a>', $permalink, 'Feedback<img class="alignnone wp-image-188852" style="margin: -30px 0 0 0px;" role="img" src="https://einedomain.at/wp-content/uploads/2020/08/helpful-heart.png" alt="helpful-heart" width="27" height="25" />' ); // Hier ggf. den Text anpassen
});

Ein weiters Beispiel  ists dann mit dem folgendem PNG Bild 3 KB. Des nächst ist wie oben, also Ausrichtung 'keine' und die Größe passend usw. Evtl. mit 'margin' noch ausrichten.

FEEDBACK  Bildschirmfoto_Send feedback

Und weil’s grad so zur Hand ist … Das folgende Piktogramm ist ein SVG. Also dieser Spielart muss in WP der SVG Upload gegeben sein und das ist er inzwischen aus dem Core. Wenn denn, dann s. doch erst zum Beitrag Vektorgrafik SVG kennenlernen.

Nächst das SVG ist hier gleich zum Download ZIP helpful-heart.svg*. Das hat nur 1 KB :-) Aber sei viel lieber sehr vorsichtig mit so Download von SVG. Daher kannst du das Piktogramm genauso gut direkt aus Helpful öffnen, s. Dashboard → Helpful → Einstellungen, oben Mitte. So bleibt nach dem Download auf den Comp. das helpful-heart.svg in die WP-Mediathek zu laden usw.

* Der SVG Check ergab: Keine Probleme gefunden.

CSS

So bspw. von CSS

Des Formulars Helpful ist hier das Theme 'Base'. So sind die Schaltflächen 'Abbrechen' und 'Feedback senden' untereinander. Sollte das so wie Theme Clean nebeneinander sein, die Blockschrift in Druckschrift und so mehr kleine Änderung des Themes:

/* == Helpful Änderung Anfang == */
/* Formularabstand. Oben u. unten */
.helpful {margin: 28px 0;
}

/* Überschrift. Schriftgröße */
.helpful > .helpful-header > .helpful-headline {
color: #333;
font-size: 107%;
}

/* Buttons. Schriftgröße u. Druckschrift */
.helpful > .helpful-controls > div > .helpful-button {
font-size: 1rem;
text-transform: none;
}

/* Button 'Nein'. Balken Farbe u. Breite */
.helpful > .helpful-controls > div > .helpful-button[data-value="contra"] {
border-left: 2px solid #FF9900;
}

/* Formular zur Nachricht. Button. Druckschrift u. Innenabstand */
.helpful > .helpful-content > .helpful-feedback-form > .helpful-button {
text-transform: none;
padding: 4px 15px;
}

/* Button 'Abbrechen' und 'Feedback senden' nebeneinander */
@media all and (min-width: 990px) {
    .helpful-feedback-form button.helpful-button {
        display: inline-block !important;
        width: 49.45% !important;
        margin: 0 !important;
    }
}

/* = Helpful Änderung Ende = */

Zum letztren Code für @media sind die !important verbindlich.

Ist das eine Idee? – ich kann nur sagen: "Das Plug-in ist ein WoW."

… Und wie ist dein Erfolg des Beitrags?