GA popular posts Widgetについて

  • このトピックには8件の返信、2人の参加者があり、最後にAnonymousにより7年前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #5240
    Anonymous
    メンバー

    GA popular posts WidgetをGoogle APIとGoogle Analiticsの設定を経て設置することができましたが、うまく表示されません。

    具体的には

    ①順位・サムネイル・タイトルが横並びにならない

    →下記部分の<p>タグが原因?
    $string .= “<p>$title</p>”;
    if ( $show_image && !empty($pthumb) ){
    $string .= “<div class=’ga-pvp-graphwrap’>”;
    }

    ②code Prettyもそうなのですが、CeltisPack単体できれいに表示させるには
    CSSが不足しているような気がします。

    できれば以上の点よろしくお願いします。

    #5247
    enomoto
    キーマスター

    Celtispack プラグインは、Celtis_s テーマに合わせて使用することを想定しています

    他テーマを使ってCSSが合わない場合は、ご自身でCSSを設定してください

    ちなみにサムネイル、タイトルが横並びにならない場合は、p タグではなく サムネイルの img に設定している float left がうまく働いていないと思われます

     

    #5248
    Anonymous
    メンバー


    /** GA popular posts Widget 開始 **/
    .ga-pvp-table table{
    border-collapse:collapse;
    border-spacing:0`

    border-bottom:1px solid #ddd;
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    margin:18px 0
    }

    .ga-pvp-table th,
    .ga-pvp-table td {
    padding: 2px;
    vertical-align: middle;
    border-top:1px solid #ddd;
    font-size:93%;
    font-weight:normal;
    text-align:left;
    padding:3px 8px
    }

    .ga-pvp-table th{
    font-weight:bold
    }

    .ga-pvp-titlewrapper a img{
    float: left;
    margin: 0px 10px 10px 1px;
    }
    /** GA popular posts Widget 終了 **/

    /** prettyprint 開始 **/
    .prettyprint {
    max-height: 530px;
    overflow: auto;
    }

    ol.linenums {
    margin: 0 0 0 36px;
    }
    ol.linenums li {
    padding-left: 10px;
    line-height: 17px;
    }

    /** prettyprint 終了 **/

    上記のCSSを追加したところうまく表示されるようになりました。

    一つ不満点があるとすれば、prettyprint 終了のコード部分の背景が縞々になる部分がありますね。

    その部分が横に長いプログラムを書いた時にスクロールするように設定した場合、

    はみ出した部分が縞々にならない点です。

    これを解決するにはどうすれば良いのでしょうか?

    #5250
    enomoto
    キーマスター

    code-prettify の設定については私自身よくわかっていないことも多いので、ご自身でいろいろやって見られるのがよいかと思います

    また、オープンなプロジェクトですので下記サイトで質問すればなにか解決法がわかるかもしれません

    googlearchive/code-prettify
    An embeddable script that makes source-code snippets in HTML prettier. – googlearchive/code-prettify
    googlearchive/code-prettify

     

    #5251
    Anonymous
    メンバー

    上記の縞々についてのCSSについて調べて見ましたが有力な情報は得られませんでした。

    おそらく無理なようなので諦めることにしました。

    提案なのですが、GA popular posts Widgeのウィジェット上で

    サムネイルのサイズを選択できるようにできませんか?

    70×70は個人的には大きいような気がします。

    参考までにWordpress Popular Postでは60×45のサムネイルを使用しています。

    あと、画像がない場合に表示される画像の形がおかしくてサムネイルサイズに合致していないような気がします。

    あと、年間タブや全期間タブを追加する予定はありませんか?

    #5252
    enomoto
    キーマスター

    サムネイルのサイズは、celtispack の function.php ファイルの15行目

    add_image_size('small', 70, 70, true );

    で指定していますので、カスタマイズしてください

    画像がない場合の表示は celtislib.php 567行目で行っていますので、そこをカスタマイズしてください

    また、年間タブ、全期間タブを追加する予定もありませんので、ご自身でチャレンジしてみてください

     

    #5254
    Anonymous
    メンバー

    $imageurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAAyBAMAAAAKMcuqAAAAMFBMVEXp+P71///+9/fZ7Prr7PTg5/PW4vL///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADr20u8AAACb0lEQVR42u2YMW/TQBiG33PiTJDcUZWBAWK1isSSRiAWBoTExpD+BU+w8lPyE9I/AAkDAwNiAoFEiAsLUutEQepAqH0gplgXc5/TEEfp0qhHPPgGO76zc4/f7/0+n82eIGOtyHi2gGIraxIhJ8qJcqKcKCfKiXKizBA9HxzTppXuCl5vVCMuWlheUDFW2mzUWANVpJGqm40aAyaZc/YeoLJFVGivdEWpLnWaHvncN01UhSzIZOJBeDzPuL714EMvaPWCj7p/ZOlsjHrBN/8I6FVv9o1r9AINDhcex7XbiT7kclFzWFOwCnDIId7ipWDXBYcSYFeME1VwgyQSvbK8S8c24tmAJtgC6qHPJnAIU8G72h1utU0TTSURdPmXgkwcFVH+JXH0E5f9rMtGJNRBWQ8J5Q4hjTtbbmsBHEUqLCYbl6HqdKh22/oVkOPZFNLinvFc06axSZOIrJRuJ8Avm4BG7BHXZ3yiMDLU1qqfFyGiSQfn1k3M6nhXGxvo6B6LdpVwub4b0EjbdX8+/XlTOfjxhgBLejPL+1PX/Gpk4R6ONFhE0VTvmzPNOigxHAixa75mT8+otF7z2++kSrar/y/GJHL0Ll4u56aI7JlGbYuvPt7a3FYj9Pdx7w9Zmj3E18f/YQ05IKrCfQ/eInj9M9tI9vtfWdBgt0LTuZaYhqztY9uZnqwM2iHiUJfJECEUnw51FF8ZJhrS3UuJ5gDxd3feRYYJk1974ZEXl3BnrBVzbV/G/sVTDezp5X/183VRGtfWvNjEV79Ip3/wbu3LiwZWgRzBzk6WiGxBz5L8nTYnyolyopzo0luR1g+Zan8BU3TCzYjaWUUAAAAASUVORK5CYII=";

    画像がない場合はceltislib.php 568行目の上記部分の””の中を自分で用意した画像のURLに書き換えればいいということですね。

    サムネイルのサイズと年間タブ、全期間タブの実装方法は目処がたったのですが、
    更新毎に書き換えるのは面倒なのが現状です。

    更新しても書き換えずに済む方法はありますか?

    #5255
    enomoto
    キーマスター

    画像がない場合はceltislib.php 568行目の上記部分の””の中を自分で用意した画像のURLに書き換えればいいということですね。

    そういうことです

    更新しても書き換えずに済む方法はありますか?

    Celtispackプラグインの更新?

    方法としては、この GA popular posts のモジュールのソースコードをコピーしてそれをご自身でカスタマイズして別のプラグインとして作り直しことです。そうすれば Celtispack の更新と切り離せます

    あるいは、Gitのようなバージョン管理システムを使ってソースコードを管理すればブランチやマージ等いろいろできるようになります

     

    #5256
    Anonymous
    メンバー

    別のプログラムを作成し、そこからCeltispackのモジュールに変更を加える手段はないかと思い質問しましたが、バージョン管理システムを使うのが良さそうな感じですね。

    更新毎に自分で書き換えるかバージョン管理システムを使って書き換える
    あたりで検討してみます。

    いろいろとありがとうございました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。
go-to-top