Verwenden Sie AJAX im Kurzwahlcode

Ich habe den folgenden Code zum Shortcode, um ein zufälliges Zitat anzuzeigen. Frage: Wie man einen Knopf ein neues gelegentliches Zitat anzeigen lässt? Ich meine, das würde den Knopf drücken und Ihnen ein neues Zitat zeigen (ohne die Seite natürlich zu aktualisieren).

function random_quote() { // quotes file $array = file("/path to txt file"); // generate a random number between 0 and the total count of $array minus 1 // we minus 1 from the total quotes because array indices start at 0 rather than 1 by default $r = rand(0,count($array)-1); // return the quote in the array with an indices of $r - our random number return $array[rand(0,count($array)-1)]; } add_shortcode( 'randomquotes', 'random_quote'); 

Ich bin daran interessiert, wie Sie den Inhalt auf der Seite mit Ajax in WordPress aktualisieren können? In meiner Situation, weil genau das genau sein muss.

Entschuldigung für mein schlechtes Englisch. Ich hoffe du verstehst mich. Vielen Dank!

Solutions Collecting From Web of "Verwenden Sie AJAX im Kurzwahlcode"

Zunächst einmal ist dies im Rahmen von WPSE überhaupt sehr grenzwertig .
Abgesehen von dem Shortcode, um die anfängliche HTML-Ausgabe auszulösen, ist dies wirklich nur AJAX.

Wie auch immer, so wird es gemacht:

Die PHP

Angenommen, das obige PHP-Snippet, das Sie angegeben haben, funktioniert, fügen Sie Folgendes in eine PHP-Datei für den Ajax-Aufruf ein:

/wp-content/themes/%your_theme%/js/ajax-load-quote.php

  < ?php /* uncomment the below, if you want to use native WP functions in this file */ // require_once('../../../../wp-load.php'); $array = file( $_POST['file_path'] ); // file path in $_POST, as from the js $r = rand( 0, count($array) - 1 ); return '

' . $array[$r] . ''; ?>

Für zukünftige Referenz und um diese Antwort für andere nützlich zu machen: Beachten Sie, dass wp-load.php enthalten sein muss, um native WordPress-functionalität zu nutzen. Der häufigste Fall ist wahrscheinlich die Notwendigkeit von WP_Query oder $wpdb .

Die HTML-Struktur

In einem Seiteninhalt, einem Widget oder einer Vorlagendatei:

 

I would rather have my ignorance than another man's knowledge, because I have so much more of it.
-- Mark Twain, American author & Playwright

New Quote

Dies können Sie natürlich nach Ihren Wünschen anpassen, aber um dieses Beispiel willen gehen wir damit um.
Wir werden das oben genannte über einen Shortcode später generieren.

Die jQuery

/wp-content/themes/%your_theme%/js/ajax-load-quote.js

 function ajaxQuote() { var theQuote = jQuery.ajax({ type: 'POST', url: ajaxParams.themeURI+'js/ajax-load-quote.php', /* supplying the file path to the ajax loaded php as a $_POST variable */ data: { file_path: ajaxParams.filePath }, beforeSend: function() { ajaxLoadingScreen(true,'#randomquotes'); }, success: function(data) { jQuery('#randomquotes').find('p').remove(); jQuery('#randomquotes').prepend(data); }, complete: function() { ajaxLoadingScreen(false,'#randomquotes'); } }); return theQuote; } /* Loading screen to be displayed during the process, optional */ function ajaxLoadingScreen(switchOn,element) { /* show loading screen */ if (switchOn) { jQuery(''+element).css({ 'position': 'relative' }); var appendHTML = '
Loading ...
'; if( jQuery(''+element).children('.ajax-loading-screen').length === 0 ) { jQuery(''+element).append(appendHTML); } jQuery(''+element).children('.ajax-loading-screen').first().css({ 'display': 'block', 'visibility': 'visible', 'filter': 'alpha(opacity=100)', '-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"', 'opacity': '1' }); } else { /* hide the loading screen */ jQuery(''+element).children('.ajax-loading-screen').css({ 'display': '', 'visibility': '', 'filter': '', '-ms-filter': '', 'opacity': '' }); jQuery(''+element).css({ 'position': '' }); } } /* triggering the above via the click event */ jQuery('#newquotes').click( function() { var theQuote = ajaxQuote(); return false; });

Zusammenfügen in functions.php

Fügen Sie unter Ihr oben stehendes Snippet (das Sie unten finden, einschließlich modifiziert) Folgendes ein:

 function random_quote( $atts ) { /* extracts the value of shortcode argument path */ extract( shortcode_atts( array( 'path' => get_template_directory_uri() . '/quotes.txt' // default, if not set ), $atts ) ); $array = file( $path ); $r = rand( 0, count($array) - 1 ); $output = '
' . '

' . $array[$r] . '

' . '
' . 'New Quote'; /* enqueue the below registered script, if needed */ wp_enqueue_script( 'ajax-quote' ); /* supplying the file path to the script */ wp_localize_script( 'ajax-quote', 'ajaxParams', array( 'filePath' => $path, 'themeURI' => get_template_directory_uri() . '/' ) ); return $output; } add_shortcode( 'randomquotes', 'random_quote'); /* register the js */ function wpse72974_load_scripts() { if ( ! is_admin() ) { wp_register_script( 'ajax-quote', get_template_directory_uri() . '/js/ajax-load-quote.js', array( 'jquery' ), '1.0', true ); } } add_action ( 'init', 'wpse72974_load_scripts' );

Optional: Die CSS für den Ladebildschirm

 .ajax-loading-screen { display: none; visibility: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background: #ffffff; /* the background of your site or the container of the quote */ filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; -webkit-transition: opacity .1s; -moz-transition: opacity .1s; -ms-transition: opacity .1s; -o-transition: opacity .1s; transition: opacity .1s; z-index: 9999; } .ajax-loading-screen img { position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; } 

Ressourcen / Lesen

  • wp_localize_script() – Codex
  • jQuery.ajax – jQuery-API- jQuery.ajax
  • ajaxload.info – Lade Gif Generator

Sie können ein Skript in einem Shortcode registrieren. Es wird in die Fußzeile gedruckt, wenn das Thema wp_footer() enthält.

Wie es funktioniert:

  1. Registrieren Sie den Shortcode-Callback mit add_shortcode() .
  2. Registrieren Sie im Kurzwahl-callback das Skript und geben Sie die Ausgabe zurück.
  3. admin_url( 'admin-ajax.php' ) im Skript eine Update-Schaltfläche hinzu, senden Sie eine POST-Anfrage an admin_url( 'admin-ajax.php' ) und holen Sie sich neue Daten. Fügen Sie die zurückgegebenen Daten in das Element mit dem Shortcode ein.

Hier ist ein Beispielskript, das das tut. Zwei Dateien: eine PHP-class und eine JavaScript-Datei. Beide sollten im selben Verzeichnis sitzen, zum Beispiel ajax-shortcode-demo .

ajax-shortcode-demo.php

 < ?php /** * Plugin Name: AJAX Shortcode Demo * Description: How to use AJAX from a shortcode handler named [ajaxdemo]. */ add_action( 'wp_loaded', array ( 'Ajax_Shortcode_Demo', 'get_instance' ) ); class Ajax_Shortcode_Demo { /** * Current plugin instance * * @type NULL|object */ protected static $instance = NULL; /** * Unique action name to trigger our callback * * @type string */ protected $ajax_action = 'load_demo_data'; /** * CSS class for the shortcode, reused as JavaScript handle. * * Must be unique too. * * @type string */ protected $shortcode_class = 'ajaxdemo'; /** * Remeber if we had regsitered a script on a page already. * * @type boolean */ protected $script_registered = FALSE; /** * Create a new instance. * * @wp-hook wp_loaded * @return object $this */ public static function get_instance() { NULL === self::$instance and self::$instance = new self; return self::$instance; } /** * Constructor. Register shortcode and AJAX callback handlers. */ public function __construct() { add_shortcode( 'ajaxdemo', array ( $this, 'shortcode_handler' ) ); // register the AJAX callback $callback = array ( $this, 'ajax_callback' ); // user who are logged in add_action( "wp_ajax_$this->ajax_action", $callback ); // anonymous users add_action( "wp_ajax_nopriv_$this->ajax_action", $callback ); } /** * Render the shortcode. */ public function shortcode_handler() { $this->register_scripts(); return sprintf( '
%2$s
', $this->shortcode_class, $this->get_rand() ); } /** * Return AJAX result. * * Must 'echo' and 'die'. * * @wp-hook wp_ajax_$this->ajax_action * @wp-hook wp_ajax_nopriv_$this->ajax_action * @return int */ public function ajax_callback() { echo $this->get_rand(); exit; } /** * Random number. * * @return int */ protected function get_rand() { return rand( 1, 1000 ); } /** * Register script and global data object. * * The data will be printent before the linked script. */ protected function register_scripts() { if ( $this->script_registered ) return; $this->script_registered = TRUE; wp_register_script( // unique handle $this->shortcode_class, // script URL plugin_dir_url( __FILE__ ) . '/jquery-ajax-demo.js', // dependencies array ( 'jquery'), // version 'v1', // print in footer TRUE ); wp_enqueue_script( $this->shortcode_class ); $data = array ( // URL address for AJAX request 'ajaxUrl' => admin_url( 'admin-ajax.php' ), // action to trigger our callback 'action' => $this->ajax_action, // selector for jQuery 'democlass' => $this->shortcode_class ); wp_localize_script( $this->shortcode_class, 'AjaxDemo', $data ); } }

jquery-ajax-demo.js

 jQuery( function( $ ) { var buttonClass = AjaxDemo.democlass + 'Button', // insert AJAX result into the shortcode element updateDemo = function( response ){ $( '.' + AjaxDemo.democlass ).find( 'b' ).html( response ); }, // fetch AJAX data loadDemo = function() { $.post( AjaxDemo.ajaxUrl, { action: AjaxDemo.action }, updateDemo ); }; // add an update button $( '.' + AjaxDemo.democlass ) .append( ' ' ); // assign the clock handler to the button $( '.' + buttonClass ).click( loadDemo ); }); 

Ergebnis in einem Blogpost:

Bildbeschreibung hier eingeben