SweetテーマでWP Canvas Shortcodesを利用する方法

  1. TOP
  2. Information
  3. Topics
WP Canvas Shortcodes

SweetテーマでWP Canvas Shortcodesを利用する際の注意点


WordPressテーマ 【 Sweet 】

theme_sweet_1


大人可愛いスウィートなテーマ。
ピンタレスト風グリッドレイアウトにお好みのワンポイントアイコンを添えて。
管理画面のテーマオプションで柔軟なカスタマイズが可能です。

WordPressテーマ Sweet

WP Canvas Shortcodes

banner-772x250


様々なパーツをショートコードとして投稿記事に埋め込むことができるプラグイン

WP Canvas – Shortcodes


Sweetテーマを適用した状態でWP Canvas Shortcodesというショートコードを拡張するプラグインを利用すると、 スマホのWebkit系ブラウザ（Safari、Chrome）でトップページの画像が重なって表示されてしまう場合があります。

SweetとWP Canvas Shortcodesはどちらも「Masonry」というスクリプトを利用しています。
また、Sweetではクロスブラウザ対応として、表示が崩れる可能性を回避するために「imagesLoaded」というスクリプトを併用しています。
Sweetでは表示高速化の観点から、テーマ側の設定としてスマホで閲覧する際には「Masonry」「imagesLoaded」を読み込まない設計になっています。 （スマホでは読み込まない状態で正常に動作するようになっています。）

しかしながら、WP Canvas Shortcodesプラグインをインストールしていると、プラグインの仕様でスマホで閲覧する際にも「Masonry」のみが読み込まれることで、 「imagesLoaded」が読み込まれていないために画像の表示が崩れる場合があります。


対処方法

Sweetテーマをご利用の方は、WP Canvas Shortcodesプラグインを「停止」して頂くことをお勧め致します。

Wordpress（ワードプレス）管理画面の「プラグイン」→「インストール済みプラグイン」にてWP Canvas Shortcodesを停止することができます。
WP Canvas Shortcodesを利用しない場合でも、Dolce & VivaceのWordPressテーマでは、テーマデザインに合わせた50種類以上の『テーマ専用ショートコード』をご利用頂けます。設定は不要で、投稿画面のドロップダウンから目的のショートコードを選択するだけで簡単に挿入して頂けます。

Sweetテーマにて引き続きWP Canvas Shortcodesをご利用されたい場合には、
下記の方法にてファイルの編集を行うことでスマホでの表示が崩れる現象を回避することができます。


SweetテーマでWP Canvas Shortcodesを利用する方法


下記の内容はWordPressテーマファイルを直接編集する [テーマの改造] に関するものとなります。
WordPress本体の機能/設定や外部プラグインの機能/設定、WordPressテーマの改造については無料サポートの対象外となっております。
お問い合わせやご質問には対応致しかねますので予めご了承下さい。

下記の方法はテーマファイルを直接編集するものとなります。
設定を誤ると画面が真っ白になって表示されなくなる可能性もありますので、必ずバックアップを取った上で慎重に作業を行って下さい。

  • 1. WordPress（ワードプレス）管理画面の「外観」→「テーマの編集」へ進みます。
  • 2. 右側のテーマファイルのリストから、「テーマのための関数（function.php）」を選択します。
  • 3. function.phpの内容がテキストエリアに表示されているので、130行目付近の下記の箇所を探します。
    function.php
    if(is_mymobile()){
wp_enqueue_script( 'my-materialize', $dir.'/js/materialize.min.js',
array('jquery'), null, true);
wp_enqueue_script( 'my-boxer', $dir.'/js/jquery.fs.boxer.min.js',
array('jquery','my-materialize'), null, true);
wp_enqueue_script( 'dolce-vivace', $dir.'/js/vivace.js',
array('jquery','my-boxer'), null, true);
}else{
  • 4. ↑を↓のコードに置き換えます。
    function.php
    if(is_mymobile()){
wp_enqueue_script( 'my-materialize', $dir.'/js/materialize.min.js',
array('jquery'), null, true);
wp_enqueue_script( 'my-boxer', $dir.'/js/jquery.fs.boxer.min.js',
array('jquery','my-materialize'), null, true);
wp_enqueue_script( 'dolce-vivace', $dir.'/js/vivace.js',
array('jquery','my-boxer'), null, true);
wp_enqueue_script( 'my-masonry', $dir.'/js/masonry.pkgd.min.js',
array('jquery'), null, true);
wp_enqueue_script( 'my-imagesloaded',
$dir.'/js/imagesloaded.pkgd.min.js', array('jquery','my-masonry'),
null, true);
}else{
  • 5. 画面の下にある「ファイルを更新」を押して編集を完了します。
  • 6. 右側のテーマファイルのリストから、「テーマフッター（footer.php）」を選択します。
  • 7. footer.phpの内容がテキストエリアに表示されているので、最終行付近の下記の箇所を探します。
    footer.php
    </body>
</html>
  • 8. ↑を↓のコードに置き換えます。
    function.php
    <?php if(is_mymobile()){ ?>
<script type="text/javascript">
jQuery(function(){
var $container = $('.js-masonry');
$container.imagesLoaded(function(){
  $container.masonry({
        $container.masonry({
        transitionDuration: 0,
        itemSelector: '.item',
        isFitWidth: true,
        columnWidth: 320,
  });
});
});
</script>
<?php } ?>

</body>
</html>
  • 9. 画面の下にある「ファイルを更新」を押して編集を完了します。

以上で設定は完了です。
Sweetテーマを適用した状態で、スマホでの表示崩れを起こすことなくWP Canvas Shortcodesをご利用頂けます。


Article : Dolce & Vivace
WordPressテーマ一覧