Wordpress 滑块替换为移动屏幕的图像[关闭]答案

【问题标题】：Wordpress slider replace with an image for the mobile screen [closed]Wordpress 滑块替换为移动屏幕的图像[关闭]
【发布时间】：2014-05-27 14:49:23
【问题描述】：

我正在处理这个项目http://color-run.giedre.dk/。我想用图像替换当前的滑块，但仅适用于移动版本。这是一个 wordpress 网站。如果有人可以提供帮助，那就太好了？

【问题讨论】：

使用 media queries 在移动设备上显示 HTML 元素或类并在桌面设备上隐藏它。

标签： php css wordpress slider

【解决方案1】：

你可以使用wp_is_mobile()Function，这个比较靠谱。如果它是移动的，则运行 CSS - 这样您就不必运行一堆媒体查询：

<?php if(wp_is_mobile()) : ?>
    <style type="text/css">
        ...
    </style>
<?php endif; ?>

将您的滑块包裹在IF ? ELSE

<?php if(!wp_is_mobile()) : ?>
    <div id="sliderWrapper">
        ...
    </div> 
<?php else : /** Is Mobile **/ ?>
    <img src="...
<?php endif; ?>

【讨论】：

没问题。如果其中一个答案有帮助，请确保单击答案旁边的复选标记（已回答）按钮，以便将主题标记为“已解决”！

【解决方案2】：

将图片放在 HTML 中的滑块下方：

<img src="#" class="mobile-image">

将其隐藏在您的 CSS 中：

.mobile-image {
    display: none;
}

隐藏滑块，使用媒体查询显示图像，调整最小/最大宽度以满足您的需求：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px) {

    .cycloneslider {
        display: none;
    }
    .mobile-image {
        display: block;
    }
}

【讨论】：

非常感谢 - 但如何添加图片？因为 Wordpress 将所有图像存储在 数据库
如果您喜欢编辑您的主题（使用子主题！），您可以将其设为特色图片：codex.wordpress.org/Post_Thumbnails，否则只需通过 FTP 上传并直接将其写入主题。也可以查看advancedcustomfields.com 插件，为您的主页添加图片的自定义字段。
谢谢！另一个问题是我想只隐藏两页的旋风滑块并将其保留在其他页面上，但它具有相同的类。有没有办法解决它？
您可以专门为这些页面添加内联样式，即<style>.cycloneslider {display: none;}</style>