Simple GA Rankingを使用して、人気記事をSimplicityと同じサムネイル付きのデザインで掲載したい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など Simple GA Rankingを使用して、人気記事をSimplicityと同じサムネイル付きのデザインで掲載したい

  • このトピックには13件の返信、2人の参加者があり、最後に小田により6年、 11ヶ月前に更新されました。
13件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52427
      小田
      ゲスト

      いつもお世話になっております。

      表題の件について、いろんなブログや過去のトピック#48238を確認したのですが、
      どうあがいても自己解決できなさそうだったのでお力を貸してください。。
      (#48238も、恐らく今回の質問に近いものだろうってくらいにしか理解できてないレベルです…)

      ■主な読んだブログ
      http://tabibitojin.com/wordpress-plugin-simple-ga-ranking/
      https://wordpress.kimoota.net/simple-ga-ranking/

      —【質問本題】—

      現在、人気記事一覧を「WordPress Popular Posts」を使って掲載しています。
      しかし、今後サーバーを「wpXクラウド」に移転する予定で、WordPress Popular Postsとの相性が悪いため、
      新たに「Simple GA Ranking」(wpX担当者推奨)を使用して人気記事を掲載したいと考えています。

      調べたところ、「Simple GA Ranking」プラグインの設定だけだと、ウィジェットを追加してテキストのみ一覧で表示することしかできないようです。
      希望としては、Simplicityと同じようにサムネイル付きで表示させたいです。

      具体的には↓の条件です。
      ・表示位置:サイドバー(右)
      ・表示タイプ:デフォルト
      ・サイドバーの横幅:336px
      ・サムネイルの角の丸め具合:角を丸める
      ・可能であれば順位付き
      ※投稿数10記事、集計単位1週間(これはプラグイン側の設定となるようです)
      ※Simplicity2.2.9を使用中

      お手を煩わせて大変恐縮ですが、ウィジェットを追加した後、
      【どこにどんなコードを追加すればよいのか】をご教示いただきたいです。

      なお、サーバー移転については、この件が実現可能なのか分かってからにしたかったので、まだ行っていません。

      お手数おかけしますがよろしくお願いいたします。

    • #52440
      アバター画像わいひら
      キーマスター

      申し訳ないですが、サポート対象外のものにもあるように、個々のプラグインを利用したカスタマイズ方法までは、サポートできないです。
      僕も、日々の仕事の中の空いた時間にしかサポートする時間がないため、申し訳ないです。

    • #52464
      小田
      ゲスト

      わいひらさん、コメントありがとうございます。
      「サポート対象外のもの」を確認せず相談してしまい申し訳ございませんでした。。

      ちなみに、プラグインを使わず、手動(任意で人気記事を選択)で掲載する方法をご教示いただくことは可能でしょうか。もし「あまりにも時間がかかるカスタマイズ方法」に該当するようでしたらヒントだけでも教えていただけますと幸いです。

      お忙しいところ繰り返し相談してしまいすみませんが、どうぞよろしくお願いいたします。

    • #52487
      アバター画像わいひら
      キーマスター

      自分で人気記事を選ぶのであれば、以下のようにHTMLを直接書いてテキストウィジェットに表示させると、特にカスタマイズを必要とせずできるかと思います。

      <aside class="widget widget_popular_ranking"><h3 class="widget_title sidebar_widget_title">人気記事</h3>
      <ul class="wpp-list">
      <li><a href="https://wp-simplicity.com/simplicity-child-theme/" title="Simplicityの子テーマをインストールする方法" target="_self"><img src="https://wp-simplicity.com/wp-content/uploads/wordpress-popular-posts/259-featured-75x75.jpg" width="75" height="75" title="Simplicityの子テーマをインストールする方法" alt="Simplicityの子テーマをインストールする方法" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://wp-simplicity.com/simplicity-child-theme/" title="Simplicityの子テーマをインストールする方法" class="wpp-post-title" target="_self">Simplicityの子テーマをインストールする方法</a> </li>
      <li><a href="https://wp-simplicity.com/how-to-set-big-header-image/" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" target="_self"><img src="https://wp-simplicity.com/wp-content/uploads/wordpress-popular-posts/15369-featured-75x75.jpg" width="75" height="75" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" alt="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://wp-simplicity.com/how-to-set-big-header-image/" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" class="wpp-post-title" target="_self">Simplicityに画面幅いっぱいのヘッダー画像を設定する方法</a> </li>
      </ul>
      <div class="clear"></div>
      
      </aside>
    • #52519
      小田
      ゲスト

      わいひらさんありがとうございます!

      さっそくやってみたところ表示することはできたのですが、WordPress Popular Postsを削除したせいなのか、ランキングの数字が出なくなってしまいました。
      度々申し訳ないのですが、数字を表示する方法を教えていたただきたいです。。

    • #52525
      アバター画像わいひら
      キーマスター

      ページを設定状態とソースコードを見たいので、URLを掲載していただいて良いですか?

    • #52530
      かうたっく
      ゲスト

      きまぐれに失礼します

      さっそくやってみたところ表示することはできたのですが、WordPress Popular Postsを削除したせいなのか、ランキングの数字が出なくなってしまいました。

      人気記事のウィジェットを開いたら、

      集計期間の表示(人気記事のみ)
      □集計単位の表示

      閲覧数の表示(人気記事のみ)
      □閲覧数の表示

      ランキング順位の表示(人気記事のみ)
      □ランキング順位の表示

      とあるので、□にチェックを入れると数字が表示されるかと思われます。

    • #52536
      小田
      ゲスト

      わいひらさん>
      大変恐縮ですが、個別にURLをお伝えしてもよいでしょうか。

      かうたっくさん>
      今回の質問はWordPress Popular Postsと人気記事ウィジェットを使わず、
      テキストウィジェットに直接HTMLを記載する方法なので、
      その方法では表示することができないと認識しているのですが。。

    • #52539
      小田
      ゲスト

      あと、キャッシュを削除した状態で改めて確認したら、
      サムネイル画像も表示されていなかったです。

      大変お手数おかけしますがこちらも含めてご教示いただきたいです。
      よろしくお願いいたします。

    • #52543
      アバター画像わいひら
      キーマスター

      ソースコードを改めて見返して気づいたのですが、#52487にて以下のように書いていた部分を、
      <aside class="widget widget_popular_ranking">
      以下のように変更すると多分ランキングが表示されるかと思います。おそらく。
      <aside class="widget widget_popular_ranking ranking_list">

      一応、修正したサンプルコードも改めて以下に掲載しておきます。

      <aside class="widget widget_popular_ranking ranking_list"><h3 class="widget_title sidebar_widget_title">人気記事</h3>
      <ul class="wpp-list">
      <li><a href="https://wp-simplicity.com/simplicity-child-theme/" title="Simplicityの子テーマをインストールする方法" target="_self"><img src="https://wp-simplicity.com/wp-content/uploads/wordpress-popular-posts/259-featured-75x75.jpg" width="75" height="75" title="Simplicityの子テーマをインストールする方法" alt="Simplicityの子テーマをインストールする方法" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://wp-simplicity.com/simplicity-child-theme/" title="Simplicityの子テーマをインストールする方法" class="wpp-post-title" target="_self">Simplicityの子テーマをインストールする方法</a> </li>
      <li><a href="https://wp-simplicity.com/how-to-set-big-header-image/" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" target="_self"><img src="https://wp-simplicity.com/wp-content/uploads/wordpress-popular-posts/15369-featured-75x75.jpg" width="75" height="75" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" alt="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="https://wp-simplicity.com/how-to-set-big-header-image/" title="Simplicityに画面幅いっぱいのヘッダー画像を設定する方法" class="wpp-post-title" target="_self">Simplicityに画面幅いっぱいのヘッダー画像を設定する方法</a> </li>
      </ul>
      <div class="clear"></div>
      </aside>
    • #52545
      小田
      ゲスト

      わいひらさん>
      修正してみましたが、やはりランキングが表示されませんでした。。

      ちなみに、サムネイル画像が表示されなかったのは、画像URLが、

      img src=”http://〇〇〇.jp/wp-content/uploads/wordpress-popular-posts/1513-featured-75×75.jpg

      と、「wordpress-popular-posts」が入っていたからだと思います。メディアライブラリから再度画像のURLをコピペしたらサムネイル画像は表示されました。

      これと同じようにwordpress-popular-postsを削除したことでランキング表示にも影響がでているのでしょうか。。??

    • #52546
      小田
      ゲスト

      連投失礼します><

      あと、メディアライブラリの画像URLを張り付けることで画像表示はできたものの、画質が圧縮されてぼやけたような表示になってしまいます。これも治す方法を伺いたいです。

    • #52548
      アバター画像わいひら
      キーマスター

      やはり、ソースコードを見たいところですが、URLが公開が難しいとのことなので、申しわけないですが(不具合確認以外での)個別対応は現在行っていません。
      スタイルシートで番号を表示する方法は以下なので、CSSセレクターを自前で設定してください。

      .ranking_list {
        counter-reset: wpp-ranking;
      }
      
      .ranking_list ul li{
        position: relative;
      }
      
      .ranking_list ul li:before {
        background: none repeat scroll 0 0 #666;
        color: #fff;
        content: counter(wpp-ranking, decimal);
        counter-increment: wpp-ranking;
        font-size: 75%;
        left: 0;
        top: 3px;
        line-height: 1;
        padding: 4px 7px;
        position: absolute;
        z-index: 1;
        opacity: 0.9;
        border-radius: 2px;
        font-family: Arial;
      }

      メディアファイルは、表示するサイズにキッチリとリサイズしたものをアップして利用すればよいかと思います。

    • #52550
      小田
      ゲスト

      お忙しい中ありがとうございました!

13件の返信スレッドを表示中
  • トピック「Simple GA Rankingを使用して、人気記事をSimplicityと同じサムネイル付きのデザインで掲載したい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)