Hinzufügen des Links Weniger / Mehr zum benutzerdefinierten Post Meta

Damit,

Ich habe einen Produktposttyp mit benutzerdefinierten Metaboxen. Eine der Meta-Box ist für weitere Details. Ich zeige den benutzerdefinierten Post-Typ in anderen Posts mit einem Shortcode.

Ich kann die zusätzlichen Details auf dem Frontend zeigen. Wenn die Details etwas lang sind, möchte ich einen mehr Link zeigen, der den Rest der Details anzeigt, wenn er angeklickt wird.

Wie mache ich das?

So etwas haben sie hier. https://www.retailmenot.com/ Wenn Sie auf “Mehr” klicken, werden alle Details angezeigt.

Danke im Voraus.

Solutions Collecting From Web of "Hinzufügen des Links Weniger / Mehr zum benutzerdefinierten Post Meta"

Was Sie beschreiben, und das Beispiel, das Sie verknüpft haben, verwendet Javascript, um das Anzeigestilattribut eines Container-DIVs umzuschalten.

Das Beispiel, das Sie verknüpft haben, verwendet es nur, wenn zusätzliche Details verfügbar sind, und sie wurden in einem separaten div zum Beschreibungstext usw. platziert.

Die functionalität funktioniert wie folgt:

Wir haben einige divs mit IDs und eine mit einem onclick, der unsere JavaScript-function showHide() . In diesem Beispiel geht es darum, das div mit der ID showAndHide / zu verbergen:

 
Read More

This is the show-and-hide div.

Für den Javascript-Teil:

Wir bekommen das Div durch seine ID und setzen es auf eine Variable, hier sh . Dann überprüfen wir den Status von sh ‘s style: display attribute. Ist dies none der onclick() setzt onclick() den block , dass er onclick() . Wenn es block , dann setzt es none und “versteckt” es.

All dies ist sehr einfach in ein paar Zeilen Code getan:

  

W3C gibt ein sehr sauberes Beispiel dafür, das Sie in Ihrem Browser ausprobieren können

Als Nebenbemerkung können Sie ähnliche functionen mit dem Attribut css visibility erzielen, aber es verhält sich anders. Display:none; nimmt keinen Platz ein, es wird effektiv entfernt; während mit visibility:hidden; der Platz des Elements bleibt erhalten. Dies gilt nur, wenn Sie mit table und den collapse verwenden. Da das von Ihnen verlinkte Beispiel keine tr und der Speicherplatz maximiert / minimiert wird , habe ich mich für Display:Block/None . Lesen Sie mehr über Sichtbarkeit: sichtbar / versteckt / hier zusammenfalten.

Eine viel sachkundigere Erklärung zu den Unterschieden zwischen Display und Sichtbarkeit

Hinzufügen dieser functionalität zu einer Shortcode-Ausgabe in WordPress

1) Sie benötigen die IDs der Elemente, die Sie ein- / ausblenden möchten.

2) Wenn Sie einen “mehr lesen” -Text und einen Klick hinzufügen, müssen Sie entweder a) einen messbaren Punkt, an dem Sie ihn in das enthaltende div einfügen, oder b) ein Element, dem er vorangestellt werden kann, kennen oder angehängt .

3) nimm die volle JavaScript-function (en), füge sie zu einer Datei, myShowHide.js, vielleicht hinzu und lade sie in das Child-Theme-Verzeichnis hoch .

4) In functions.php , registriere das Skript mit wp_register_script und setze es mit wp_enqueue_script in die wp_enqueue_script , um diese Javascript-Datei in deine Template-Seiten aufzunehmen. Sie können wp_enqueue_script in eine function wp_enqueue_script wenn Sie das Skript nur auf bestimmten Seiten wp_enqueue_script .

Sie können dies für Sie Meta-Box-Daten versuchen:

Fragen Sie Ihre Metadaten ab mit:

 < ?php $slider = new WP_Query(array( 'post_type' => 'post', 'posts_per_page' => 5, 'post_status' => 'publish', 'meta_query' => array( array( 'key' => 'your metabox key', 'value' => 'your metabox value', 'compare' => 'IN' ) ) )); if($slider->have_posts()) : while($slider->have_posts()) : $slider->the_post(); $idd = get_the_ID(); ?> < ?php echo get_excerpt(); ?> < ?php endwhile; endif; ?> 

Und diesen Code in functions.php einfügen:

 function get_excerpt(){ $excerpt = get_the_content(); $excerpt = preg_replace(" (\[.*?\])",'',$excerpt); $excerpt = strip_shortcodes($excerpt); $excerpt = strip_tags($excerpt); $excerpt = substr($excerpt, 0, 820); $excerpt = substr($excerpt, 0, strripos($excerpt, " ")); $excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt)); $excerpt = $excerpt.'.... 

Details

'; return $excerpt; }