Zunächst einmal ist dies im Rahmen von WPSE überhaupt sehr grenzwertig .
Abgesehen von dem Shortcode zum Auslösen der anfänglichen HTML-Ausgabe ist dies wirklich nur AJAX.
Trotzdem wird es so gemacht:
Das PHP
Angenommen, das oben angegebene PHP-Snippet ist funktionsfähig, platzieren Sie Folgendes in einer PHP-Datei für den Ajax-Aufruf:
/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 '<p>' . $array[$r] . '</p>';
?>
Zum späteren Nachschlagen und um diese Antwort für andere nützlich zu machen: Beachten Sie, dass wp-load.php
dies enthalten sein muss, um die native WordPress-Funktionalität nutzen zu können. Der häufigste Fall ist wahrscheinlich entweder die Notwendigkeit von WP_Query
oder $wpdb
.
Die HTML-Struktur
In einem Seiteninhalt, einem Widget oder einer Vorlagendatei:
<div id="randomquotes">
<p>I would rather have my ignorance than another man’s knowledge,
because I have so much more of it.<br />
-- Mark Twain, American author & Playwright</p>
</div>
<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>
Dies können Sie natürlich nach Ihren Wünschen anpassen, aber für dieses Beispiel gehen wir so vor.
Wir werden das oben genannte später über einen Shortcode 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 = '<div class="ajax-loading-screen appended">
<img src="'+ajaxParams.themeURI+'images/ajax-loader.gif"
alt="Loading ..." width="16" height="16" /></div>';
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;
});
Zusammenstellen in functions.php
Fügen Sie unter Ihrem obigen Snippet (das Sie unten modifiziert finden) 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 = '<div id="randomquotes">' .
'<p>' . $array[$r] . '</p>' .
'</div>' .
'<a id="newquote" class="button" href="#" title="Gimme a new one!">New Quote</a>';
/* 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: Das 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
function random_quote ($path) { $ array = file ("$ path");
<br/> ...[randomquote file = "http://exampe.com/file.txt"]
<br/> Also wird es funktionieren? Ich bin nicht sehr versiert in der Programmierung.[randomquotes path="path/to/file.txt"]
, an js und von dort an das PHP-Skript weitergegeben wird.Sie können ein Skript in einem Shortcode registrieren. Es wird in die Fußzeile gedruckt, sofern das Thema enthält
wp_footer()
.Wie es funktioniert:
add_shortcode()
.admin_url( 'admin-ajax.php' )
und rufen Sie neue Daten ab. Fügen Sie die zurückgegebenen Daten mit dem Shortcode in das Element ein.Hier ist ein Beispielskript, das das macht. Zwei Dateien: eine PHP-Klasse und eine JavaScript-Datei. Beide sollten sich beispielsweise im selben Verzeichnis befinden
ajax-shortcode-demo
.ajax-shortcode-demo.php
jquery-ajax-demo.js
Ergebnis in einem Blogbeitrag:
quelle
define('WP_DEBUG', true);
in meiner wp-config.php aktiviert habe, hat diese Lösung einen Fehler generiert :Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method Ajax_Shortcode_Demo::get_instance() should not be called statically in /var/www/.../public_html/wp-includes/plugin.php on line 496
. Ist das kritisch? Ich habe es ein wenig geändert: wordpress.stackexchange.com/q/196332/25187static
. Ich habe meinen Beitrag dafür bearbeitet. Danke für die Anmerkung. Ich würde den Code nicht mehr so schreiben. :)