两个选项。
第一种方法是使用javascript确定浏览器大小。然后让你的代码做一些事情,如果浏览器的大小超过或低于一定的大小,它会更改链接。
第二种方法是使用css,这可能是您的首选方法。如果你的主题有这样写的body标签<body <?php body_class(); ?>>
然后将以下类添加到页面:page-id-164
.
设置模板,使其具有两个选项,并将它们分别包装在具有唯一类或id的div中。
设置display:none;
一个是正确的css,另一个是正确的css。然后在代码中使用@media only screen and (min-width: 1500px) {
执行相反的操作。问题是您正在加载大量不必要的代码,因为人们只能看到其中一个。
如果您完全引用单独的页面,包括标题,那么我建议您使用javascript选项。下面是使用jQuery的代码,如果有主题jQuery脚本文件,您需要将其放在ready函数中。您还可能需要调整<
到a>
这取决于您希望javascript何时进行切换。
if ( $(document).width() < 1500 ) {
$(\'.change-link > a\').each( function(){
newlink = \'Enter New URL\';
$(this).attr(\'href\',newlink);
});
}
请记住,如果您将此内容放入代码中,并且
$
未定义,则需要更改
$
到
jquery
.
如果要将其作为内联js放置在主题中,则应执行以下操作:
<script type="text/javascript">
jQuery(document).ready(function($) {
if ( $(document).width() < 1500 ) {
$(\'.change-link > a\').each( function(){
newlink = \'Enter New URL\';
$(this).attr(\'href\',newlink);
});
}
});
</script>
或者,如果希望将其作为单独的js文件调用,然后创建如下所示的文件,您可以将以下内容放入
functions.php
:
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\');
然后在js文件中包含以下代码,并将该文件放在主题目录中:
jQuery(document).ready(function($) {
if ( $(document).width() < 1500 ) {
$(\'.change-link > a\').each( function(){
newlink = \'Enter New URL\';
$(this).attr(\'href\',newlink);
});
}
});