Adnan Shahid

<p>Responsive preview tool for WordPress admin to switch between mobile, tablet, and desktop viewports inside the dashboard.</p>
<p><strong>Key features</strong><br />
* One-click viewport buttons (Mobile / Tablet / Desktop)<br />
* Uses an iframe to preview your site inside the WordPress admin<br />
* No tracking, no external requests, no background processes</p>
<h3>License</h3>
<p>GPLv2 or later.</p>


Responsive Admin Viewports Preview

Responsive preview tool for WordPress admin to switch between mobile, tablet, and desktop viewports inside the dashboard.

Takayuki Miyauchi

<p>This plugin allows you to switch theme according to the User Agent on the Nginx reverse proxy.</p>
<p>Nginx Mobile Theme’s requirements are as follows.</p>
<ul>
<li>PHP 5.3 or later</li>
<li>WordPress 3.7 or later</li>
<li><a href="https://wordpress.org/plugins/nginx-champuru/" rel="ugc">Nginx Cache Controller</a> 2.0.0 or later</li>
</ul>
<h4>Some Features</h4>
<ul>
<li>You can flush mobile’s and pc’s each caches automatically via <a href="https://wordpress.org/plugins/nginx-champuru/" rel="ugc">Nginx Cache Controller</a>.</li>
<li>Allow you to switch theme according to the user-agent.</li>
<li>Allow you to customize multiple mobile device support via filter-hook.</li>
</ul>
<h4>Nginx Configuration</h4>
<p>Add mobile device detection to the nginx.conf.</p>
<pre><code>set $mobile '';
if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot\-Mobile|AdsBot\-Google)') {
    set $mobile "@smartphone";
}
</code></pre>
<p>Set proxy_cache_key.</p>
<pre><code>proxy_cache_key "$mobile$scheme://$host$request_uri";
</code></pre>
<p>Send custom request header to the backend.</p>
<pre><code>proxy_set_header X-UA-Detect $mobile;
</code></pre>
<p>Nginx Mobile Theme will switch theme when ‘@smartphone’ is received in the <code>$_SERVER['HTTP_X_UA_DETECT']</code>.</p>
<h4>How to use</h4>
<ol>
<li>Please access to the theme-customizer in the WordPress admin area.</li>
<li>Please select Mobile Theme in the drop-down.</li>
<li>Click “Save & Publish” button to save.</li>
</ol>
<h4>Multiple mobile device support</h4>
<ol>
<li>Add custom mobile detection to the nginx.conf.</li>
<li>Add custom mobile detection to the WordPress via <code>nginxmobile_mobile_detects</code> filter-hook.</li>
</ol>
<p>nginx.conf:<br />
    set $mobile ”;<br />
    if ($http_user_agent ~* ‘(iPhone|iPod)’) {<br />
        set $mobile “@smartphone”;<br />
    }<br />
    if ($http_user_agent ~* ‘iPad’) {<br />
        set $mobile “@tablet”;<br />
    }</p>
<p>In your custom plugin:<br />
    add_filter(‘nginxmobile_mobile_detects’, function(){<br />
        return array(‘@smartphone’, ‘@tablet’);<br />
    });</p>
<ul>
<li>As a result, allow you to select theme for @smartphone and @tablet individually in the theme-customizer.</li>
</ul>
<h4>Amimoto Support</h4>
<p>The <a href="http://megumi-cloud.com/" rel="nofollow ugc">Amimoto</a> is a full-tuned WordPress AMI on the AWS EC2.</p>
<ul>
<li>Uncomment /etc/nginx/conf.d/default.conf in line 17</li>
</ul>
<p>before:<br />
    #include /etc/nginx/mobile-detect;</p>
<p>after:<br />
    include /etc/nginx/mobile-detect;</p>
<ul>
<li>Add line to /etc/nginx/nginx.conf like following.</li>
</ul>
<p>before:<br />
    proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;<br />
    proxy_set_header  Accept-Encoding    “”;</p>
<p>after:<br />
    proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;<br />
    proxy_set_header  Accept-Encoding    “”;<br />
    proxy_set_header  X-UA-Detect        $mobile; # add new line</p>
<ul>
<li>
<p>Define constant in the wp-config.php</p>
<p>define(‘IS_AMIMOTO’, true);</p>
</li>
</ul>


Nginx Mobile Theme

This plugin allows you to switch theme according to the User Agent on the Nginx reverse proxy.

Responsive Admin Viewports Preview vs Nginx Mobile Theme