wordpress - 使用 Moovweb SDK 移动优化 WordPress 博客

Question

移动优化图像较多的 WordPress 博客的最佳方法是什么，而无需进行特定于设备的图像编辑？我的帖子的总体结构是这样的:

<小时/>

<div class="post" id="post-ID">
<div class="top_o_the_post">
        <h2><a href="My URL" rel="bookmark" title="My Title">My Title</a></h2>
        <small>My Sub-title</small>                         
    </div>

    <div class="entry">
        <p>Some Text</p>
        <p>More text</p>
        <p>Some more text<br>
        <table class="pics">
        <tbody><tr>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
        </tr>
        </tbody></table>
    </div>
</div>

Answer 1

如果您安装了某种图像预设创建模块，您可以制作适合移动设备(更小、更轻)的图像预设，然后通过修改 SRC 将这些图像提供给移动客户端。在您的示例中，代码转换将类似于:

 $(".//table[@class='pics']") {
    $(".//img"){
        remove("@width")
        remove("@height")
        attribute("src"){
           value(){
              replace("desktop-folder-name", "mobile-folder-name")
           }
        }
     }
 }

此外，让图像响应各种屏幕尺寸也是个好主意。所以在你的 SCSS 中你会想要这样的东西:

  .pics{
     img{
         width: 90%;
         max-width: 480px;
         display: block;
         margin: 10px auto;
     }
  }