サポート » テーマ » テーマRaindrops、ページ上部にそのままソースが表示されてしまいます

  • Raindrops1.437を使わせてもらっております。

    PC、スマホを振り分けるために「is_mobile関数」のソースをfunction.phpに記述すると、
    ページ上部にそのままソースが表示されてしまいます

    WP初心者で対応出来ずに困っております。
    対処法をご存知の方、教えていただければ大変ありがたいです。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • こんにちは

    追加したソースを知らせてください。

    追加したコードと前後2-3行を貼り付けて、コード部分を選択したらcodeボタンを押してください

    ありがとうございます。
    追加したのは以下のソースです。

    function is_mobile(){
    $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
    }

    よろしくお願いします。

    追加コードが、上記ですべてといいう事であれば、PHPの上記コード全体が<?php?>で囲まれていないために発生していると思われます。類似するコードは

    WordPressの条件分岐:モバイルとPCで別表示に変える

    等、多数のWEBサイトでこのコードと類似のコードが公開されているようですが、この関数を使ってどのような処理を行おうとしているか教えていただけますか?

    Raindropsテーマの場合、アクセスしたブラウザがモバイルデバイスか、簡単なものですが、PCからのアクセスかを判定する機能はデフォルトで存在しています。

    PCからのアクセスの場合は、body要素に、rd-pc モバイルブラウザからのアクセスに対しては、rd-mobileというクラスが追加されます。

    モバイルアクセスした場合に、表示が重くなる等を問題にしている場合には、最近話題の AMPプラグインを使う方法も、徐々に開発が進んでいます。このプラグインを使った場合のサポートスクリプトも、raindrops/plugins/plugin-presentation.phpの770行以降に存在します。

    これらの説明は、

    http://tenman.info/labo/snip/archives/8263

    等で、いくつかの記事を書いているので、検討してみてください。

    追記

    rd-pc や rd-mobileは、DOMソース(chrome等右クリックメニューで「検証」をクリックしたソース)で確認してください。

    yoisyowaiwai

    (@yoisyowaiwai)

    初心者の無知にお答えいただき、ありがとうございます。
    <?php …?>で解決いたしました。

    「判定する機能はデフォルトで存在」

    ご指摘の通りで、スマホでも問題なく表示できております。
    問題は、スマホ表示のレイアウトを変える目的で、@media only screen andが上手く効かず、悩んでネットを探した結果このコードを試した次第です。

    「AMPプラグインを使う方法も・・・」

    確認いたしましたが、未だ初心者にはハードルが高そうです。

    いろいろな選択肢を教えていただきありがとうございます。

    nobita

    (@nobita)

    良かったですね。解決済みですが、

    @media only screen andが上手く効かず

    @media は、主に responsiveness.css に書いているので、style.cssだと効きにくいです。チャイルドテーマを作っているなら、親テーマのresponsiveness.cssをチャイルドテーマにコピーして、追加記述すると反映します。

    チャイルドテーマを使っていない場合は、カスタマイザーの高度な設定に、サイト全体のCSS(Site-Wide CSS)という項目があるので、そこにセットすると、responsiveness.cssより優先して適用されます。

    何か不具合があった場合は、遠慮なく、このフォーラムに書き込んでください。

    テーマを使ってくれて、ありがとう

    • この返信は11 ヶ月前に  nobita さんが編集しました。
    yoisyowaiwai

    (@yoisyowaiwai)

    再々度失礼します。

    ご教示のresponsiveness.cssをチャイルドテーマにコピーして試してみましたが反映されません。

    試しに背景を消そうと思い、以下のコードを入れてみました。

    @media only screen and (min-width: 641px) {
                             .content background :none; }
    !important

    も入れてみましたが上手く行きません。

    何度もお手数をおかけしますが、ご教示願えれば幸いです。

    nobita

    (@nobita)

    まず、スタイルルールの記述の方法ですが

    
    @media only screen and (min-width: 641px) {
                             .content background :none; }
    !important
    

    @mediaを使う場合は、記述方法が特殊で上の記述では動作しません。

    
    @media only screen and (min-width: 641px) {
    
        .content{ 
            background :none!important; /* noneデモOKですが、transparent の方がより正しいです */
        }
    }
    

    ただ、.contentというクラスは、Raindropsテーマでは使っていませんので、どこの部分の背景を適用させたくないのか教えていただけますか?

    Raindropsテーマを使って、いろいろなスタイルの適用例を試しているページが、

    http://tenman.info/labo/css/

    ここでは、Raindropsのチャイルドテーマで、各投稿の「この投稿のカスタムCSS」にスタイルを記述したものです。

    style.cssに記述した場合は、詳細度「調べてください:)」を上げないと適用されないかもしれませんが、スタイルの適用方法などを確認する場合の参考にしてください。

    yoisyowaiwai

    (@yoisyowaiwai)

    ご指摘ありがとうございます。

    .contentというクラスは、「この投稿のカスタムCSS」に自分でつけたスタイルです。

    以下のHTMLで使用しています。

    <body>
    <nav class="content">
       <ul>
       <li class="back"><a href="/stage-staff/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_b1_icon.png" alt="舞台スタッフ" width="190" height="190" ></a></li>
         <li><a href="/stage-cast/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_o2_icon.png" alt="キャスト" width="190" height="190" ></a></li>
         <li><a href="/stage-production/"><img src="http://utairui.com/wp/wp-content/uploads/Boovo_p3_icon.png" alt="イベント制作" width="190" height="190" ></a></li>
       </ul>
    </nav>

    この部分の背景として、「この投稿のカスタムCSS」に記述してあります。

    .content {
                                width:960px;
                                height: 306px;
                                background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
                                background-position: center center;
                                background-repeat: no-repeat;
                                -moz-background-size:cover;
                                -webkit-background-size:cover;
                                -o-background-size:cover;
                                -ms-background-size:cover;
                                background-size: cover;
    }

    ご教示願えれば幸いです。

    nobita

    (@nobita)

    ソースを提供していただきありがとうございます。

    なぜ、CSSが適用されないのか、理解が出来ました。

    「この投稿のカスタムCSS」は、その投稿専用のスタイルを指定するためにあるのですが、
    ここに指定できるスタイルは、基本的には投稿の article要素以下のスタイルを指定するために準備されたものです。

    テンプレートのbody要素直下に記述された htmlブロックには、適用されないようになっています。これは、各投稿で全体のCSSを変更できるようにした場合 アーカイブやインデックスページで、それぞれの投稿に書かれたスタイルが干渉して、意図しない表示を避けるためです。

    「この投稿のカスタムCSS」へのスタイルの記述の方法は、編集ページの右上のhelpタブをクリックすると、使い方の例が記述されています。

    では、このようにテンプレートに記述されたブロックにどのようにスタイルを記述すればいいのか

    style.css等でも指定できますが、わざわざstyle.cssを開かなくてもいいように準備されているのが、カスタマイズ/高度な設定の中にある 「サイト全体のCSS」です。

    テンプレートは、そのままで 以下のCSSをサイト全体のCSSに貼り付けてみてください。

    
    .content {
        width:960px;
        height: 306px;
        background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
        background-position: center center;
        background-repeat: no-repeat;
        -moz-background-size:cover;
        -webkit-background-size:cover;
        -o-background-size:cover;
        -ms-background-size:cover;
        background-size: cover;
    }
    /* 追加スタイル */
    .content{
        margin:auto;
    }
    .content ul{
        display:flex;
        
    }
    

    「サイト全体のCSS」で保存する場合と、style.cssに保存される場合の違いは、スタイルルールの位置関係から、同じスタイルを記述した場合「サイト全体のCSS」の方が優先します。

    貼り付けたスタイルが、うまくセットできないときは、スタイルを貼り付けた後、テキストエリアの外側を一度クリックしてから保存すると、確実に保存されると思います。

    もう少し、細かなオプションなどもありますが、まずは上記の方法をお試しください。

    • この返信は11 ヶ月前に  nobita さんが編集しました。
    nobita

    (@nobita)

    タグ追加します

    yoisyowaiwai

    (@yoisyowaiwai)

    遅くなりました。
    再々、丁寧なお答えありがとうございます。

    ご指摘の「サイト全体のCSS」に以下のCSSをペーストしました。

    @media only screen and (min-width: 641px) {
        .content {
                    width:960px;
                    height: 306px;
                    margin:auto;
                    background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
                    background-position: center center;
                    background-repeat: no-repeat;
                    -moz-background-size:cover;
                    -webkit-background-size:cover;
                    -o-background-size:cover;
                    -ms-background-size:cover;
                    background-size: cover;
    }
    }
    .content ul{
                    display:flex;
    }
    @media only screen and (min-width: 0px)and(max-width: 641px){
        .content{
                     background :transparent!important;
    }
    }

    結果は、PCでは反映するものの(ブラウザ幅の調整で振り分けられる)、スマホでは反映されませんでした。
    いろいろ調べたところ、スマホの独自仕様で、Viewportの記述が必要なことがわかりました。
    (無知の故、振り回して申し訳ありません)

    それについて質問させていただきます。

    CSSを読み込んでいるHTMLのヘッド部分に、以下のViewportを記述が必須とのことでしたが、

    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    head内に記述するファイル(チャイルドテーマを使用します)は、テーマヘッダー (header.php)で良いのでしょうか?
    (類似するファイル名が他にもあったためで、以前に勝手に触って真っ白になった経験があるものですから)

    教えていただければ大変ありがたいです。

    nobita

    (@nobita)

    カスタマイザー / 外観 / レイアウトとサイドバー の項目で

    750px 中央揃え 950px 中央揃え 974px 中央揃えのいずれかが選択されているのではないかと思います。

    • レスポンシブ ボックス
    • フルサイズレスポンシブ

    を選択していただくと、ビューポートの設定は自動的に行われます。

    どちらかを選択すると、新たに レイアウトの最大幅というボックスが表示されるので、ここに希望のページ幅を入力します。

    以上で、モバイルからのアクセスの場合は、モバイル用のレイアウトで表示されるようになります。

    遅くなりました。

    ご指摘の方法で解決いたしました。

    いろいろ試してみましたが、全ての原因はfunctions.phpに記述した<?php $raindrops_page_width=960;?>にあったようです。
    当方の無知で大変お手数をおかけしてしまいました。

    この上ご質問は恐縮なのですが、以下の内容についてご教示願えればありがたいです。

    スマホ用にヘッダー画像及び、フッター画像を替えようと考えております。
    その場合、どの箇所に記述すれば良いか教えていただきたいのです。

    フッターについては、「サイトのカスタマイズ」から「ウィジェット」ー「フッターウィジェット」で、固定ページを選択する方法でよろしいのでしょうか。

    何度も申し訳ありませんが、よろしくお願い致します。

    おぉ、カスタムページ幅を設定されていたんですね。テーマの細部の機能なので、びっくりしました。

    スマホ用にヘッダー画像及び、フッター画像を替えようと考えております

    CSSで、ヘッダー画像やフッター画像をスイッチする場合は、概ね 以下の2種類の方法がありそうです。

    
    .rd-mobile #ft,
    .rd-mobile #header-image{
        background:url(http://www.example.com/images/site_image.png);
        background-size:cover;
    }
    

    利点、各投稿でのPC用ヘッダー画像の設定が可能
    欠点、wp_is_mobile()関数でクラスを出力しているので、大きめのモバイルデバイスの場合でもたぶん変更されそう。

    または、ブラウザサイズによって指定

    
    @media screen and (max-width : 480px){
        
        #ft,
        #top #header-image{
            background:url(http://www.example.com/images/site_image.png);
            background-size:cover;
        }
    }
    

    欠点、各投稿でのPC用ヘッダー画像の設定が上書きされる。
    利点、ブラウザのサイズで決め打ちできる。

    上記のような画像設定を行った場合の、設定の難所

    画像の、画像の縦横比をそれぞれの事情に合わせなくてはならない。

    background-sizeを使っても、ぴったり来ない問題が発生しそう。

    Raindropsのヘッダー画像が、ブラウザ幅に追従する基本設定の方法は、以下の通り

    
    #doc3 #header-image {
        display: block;
        position: relative;
        padding-bottom: 32.333333333333%;//アスペクト比からこの値を決めます。
        height: 0!important;//必須
        max-width: 100%;
    }
    

    #doc3 #header-imageのように、ヘッダー画像そのものの設定よりもより高い詳細度で設定されています。
    この設定を上書きするスタイルを記述する必要があると思います。
    #doc3は、カスタマイザーのレイアウトとサイドバーのページ幅設定により#doc3(ボックスレスポンシブ)#doc5(フルサイズレスポンシブ)変化します。

    • この返信は10 ヶ月、 4 週間前に  nobita さんが編集しました。
    • この返信は10 ヶ月、 4 週間前に  nobita さんが編集しました。
    • この返信は10 ヶ月、 4 週間前に  nobita さんが編集しました。
15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「テーマRaindrops、ページ上部にそのままソースが表示されてしまいます」には新たに返信することはできません。