Eine zusätzliche Option, abhängig von der Art der Parameter, die Sie übergeben müssen. Nennen wir es (2a). Sie können auch PHP-Skripte erstellen, die dynamisch generiert text/css
oder text/javascript
nicht generiert werden text/html
, und ihnen die Daten bereitstellen, die sie mithilfe von GET-Parametern benötigen, anstatt WordPress zu laden. Dies funktioniert natürlich nur, wenn Sie eine relativ kleine Anzahl relativ kompakter Parameter übergeben müssen. Angenommen, Sie müssen nur die URL eines Posts oder das Verzeichnis einer Datei o.ä. übergeben, dann können Sie Folgendes tun:
In der header.php:
<script type="text/javascript" src="<?php print get_stylesheet_directory_uri();
?>/fancy-js.php?foo=bar&url=<?php print urlencode(get_permalink($post->ID)); ?>"></script>
In fancy-js.php:
<?php
header("Content-type: text/javascript");
?>
foo = <?php print json_encode($_GET['foo']); ?>;
url = <?php print json_encode($_GET['url']); ?>;
etc.
Auf diese Weise können Sie jedoch nur auf die Daten zugreifen, die direkt in den GET-Parametern übergeben wurden. und es wird nur funktionieren, wenn die Anzahl der Dinge, die Sie übergeben müssen, relativ gering und die Darstellung dieser Dinge relativ kompakt ist. (Im Grunde genommen eine Handvoll Zeichenfolgen oder numerische Werte - ein Benutzername, etwa oder ein Verzeichnis; keine Liste aller letzten Beiträge eines Benutzers oder ähnliches.)
Welche dieser Optionen die beste ist - ich weiß es nicht; Das hängt von Ihrem Anwendungsfall ab. Option (1) hat den Vorteil, einfach zu sein und Ihnen den Zugriff auf alle WordPress-Daten zu ermöglichen, die Sie möglicherweise benötigen, ohne dass die Leistung durch zweimaliges Laden von WordPress beeinträchtigt wird. Es ist fast sicher, was Sie tun sollten, es sei denn, Sie haben einen starken Grund, dies nicht zu tun (z. B. aufgrund der Größe des Stylesheets oder Skripts, das Sie verwenden müssen).
Wenn die Größe groß genug ist, um ein Problem in Bezug auf das Gewicht Ihrer einen Seite zu verursachen, können Sie (2) oder (2a) ausprobieren.
Andernfalls - dies ist wahrscheinlich die bessere Idee - können Sie versuchen, die Teile des Skripts oder des Stylesheets, die die dynamischen Daten tatsächlich verwenden, von den Teilen zu trennen, die statisch angegeben werden können. Angenommen, Sie haben ein Stylesheet, dem ein Verzeichnis von WordPress übergeben werden muss, um einen Hintergrundparameter für das # my-fancy-Element festzulegen. Sie können dies alles in das head-Element einfügen:
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
</style>
Aber warum sollten Sie das tun müssen? Es gibt hier nur eine Zeile, die von Daten aus WordPress abhängt. Besser nur die Zeilen aufteilen, die von WordPress abhängen:
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
}
</style>
Fügen Sie alles andere in ein statisches Stylesheet ein, das Sie mit einem Standardlinkelement (style.css oder was auch immer) laden:
#my-fancy-element {
/* background-image provided dynamically */
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
Und lassen Sie die Kaskade die Arbeit machen.
Das gleiche gilt für JavaScript: anstatt dies zu tun:
<script type="text/javascript">
// Here comes a huge function that uses WordPress data:
function my_huge_function () {
// Do a million things ...
jQuery('#my-fancy').append('<a href="'+<?php json_encode(get_permalink($GLOBALS['post']->ID)); ?>+'">foo</a>);
// Do a million more things ...
my_other_function(<?php print json_encode(get_userdata($GLOBALS['post']->post_author); ?>);
}
function my_other_function (user) {
// Do a million things ...
}
</script>
Fügen Sie stattdessen so etwas in das head-Element ein:
<script type="text/javascript">
var WordPressPostData = {
url: <?php print json_encode(get_permalink($GLOBALS['post']->ID)); ?>,
author: <?php print json_encode(get_userdata($GLOBALS['post']->post_author)); ?>
}
</script>
Und dann legen Sie den Rest in einer statischen JavaScript-Datei ab und schreiben die Funktionen my_huge_function () und my_other_function () neu, um die globalen Elemente WordPressPostData.url und WordPressPostData.author zu verwenden.
40 KB CSS oder 40 KB JS können fast immer in <1 KB aufgeteilt werden, was tatsächlich von dynamischen Daten abhängt. Der Rest kann in einer statischen externen Datei angegeben und dann mithilfe der Kaskade (für CSS) oder mit globalem Zugriff neu kombiniert werden Variablen (Globals, DOM-Elemente oder was auch immer Sie bevorzugen, für JS).