So verlinken Sie eine alternative Seite in CSS

Ich habe eine WordPress-Site und möchte eine Seite, die basierend auf der Browsergröße in meinem benutzerdefinierten CSS angezeigt wird, vollständig ändern, sodass bei einer Größe von mehr als 1500 Pixel eine vollständig andere Seite geladen wird. Frag nicht, warum es so sein muss, CSS syling tut nicht, was ich brauche, da es eine komplizierte Galerie ist, die eine ganz neue Vorlage und eine neue Seite benötigt, also möchte ich jetzt zwischen den 2 Seiten basierend auf wechseln können die Browsergröße. Ich weiß, dass ich diesen Code verwenden muss –

@media nur Bildschirm und (Mindestbreite: 1500px) {

aber dann habe ich nicht gefunden, was der Code ist, um die Seite zu ersetzen ist die folgende. Die Seiten-ID in wordpress ist 164 und ich möchte sie durch 3902 ersetzen. Wenn das nicht möglich ist, wie wäre es dann mit dem Ändern des Nav-Links in CSS, abhängig von der Browser-Größe also mit einer anderen Seite?

Vielen Dank

Jason

Solutions Collecting From Web of "So verlinken Sie eine alternative Seite in CSS"

Zwei Optionen.

Der erste wäre, wie Sie gesagt haben, um die Browsergröße mit Javascript zu bestimmen. Dann lassen Sie Ihren Code etwas tun, wo er den Link ändert, wenn der Browser uns über oder unter einer bestimmten Größe befindet.

Die zweite, und dies könnte Ihre bevorzugte Methode sein, wäre die Verwendung von CSS. Wenn Ihr Thema das body-Tag wie > > Dann wird die folgende class zu Ihrer Seite hinzugefügt: page-id-164 .

Richten Sie Ihre Vorlage so ein, dass sie beide Optionen enthält, und wickeln Sie sie jeweils in ein div mit einer eindeutigen class oder ID ein.

display:none; auf einer, und dann die richtige CSS auf der anderen. Dann im Code mit @media only screen and (min-width: 1500px) { mach das Gegenteil. Das Problem ist, dass Sie viel unnötigen Code laden, da die Leute nur das eine oder andere sehen werden.

Wenn Sie sich auf separate Seiten beziehen, einschließlich der Kopfzeilen, dann würde ich die JavaScript-Option empfehlen. Hier ist der Code, der jQuery verwendet, den Sie innerhalb Ihrer Ready-function in eine Theme-jquery-Scripts-Datei einfügen möchten, falls vorhanden. Möglicherweise müssen Sie auch das < to a > anpassen, je nachdem, wann Sie Javascript aktivieren möchten.

 if ( $(document).width() < 1500 ) { $('.change-link > a').each( function(){ newlink = 'Enter New URL'; $(this).attr('href',newlink); }); } 

Denken Sie daran, wenn Sie dies in Ihren Code einfügen und Fehler mit $ nicht definiert sind, dann müssen Sie die $ in jquery .

Wenn Sie dies innerhalb Ihres Themas als Inline-Js einfügen möchten, tun Sie Folgendes:

  

Oder wenn Sie möchten, dass es als separate js-Datei aufgerufen wird, erstellen Sie die Datei wie unten gezeigt, und fügen Sie in functions.php Folgendes ein:

 function my_enqueue_js(){ wp_register_script('newlink', get_template_directory_uri().'FILE IN THEME DIRECTORY.js'); wp_enqueue_script('newlink', array('jQuery'), '1.0', true); } add_action('wp_enqueue_scripts', 'sta_enqueue_js'); 

Dann habe den folgenden Code in deiner js-Datei und lege die Datei in dein Themenverzeichnis:

 jQuery(document).ready(function($) { if ( $(document).width() < 1500 ) { $('.change-link > a').each( function(){ newlink = 'Enter New URL'; $(this).attr('href',newlink); }); } }); 
 function my_styles() { // REGISTER MULTIPLE STYLESHEETS TO BE USED LATER USING wp_enqueue_style() FUNCTION wp_register_style('default-css',get_stylesheet_directory_uri().'/style.css'); wp_register_style('custom_css',get_stylesheet_directory_uri().'/css/custompage.css'); wp_enqueue_style( 'default-css' ); // LOAD DEFAULT CSS FOR ALL PAGES if ( is_page('108') ) { // 108 is page id where you want custom css wp_dequeue_style('default-css'); // REMOVE DEFAULT STYLE wp_enqueue_style('custom-css'); // LOAD CUSTOM STYLE } } add_action( 'wp_enqueue_scripts', 'my_styles' ); 

Versuchen Sie dies, es wird default-css für alle Seiten außer der Seite mit der ID 108 geladen