カテゴリー、タグ、Tweetのリンクを追加した

普通のCMSに近づきたい

現在このNibbleblogの初期テーマの一つであるGoogleSimpleを使用しているが、記事にカテゴリー・タグ・TwitterへのTweet・Facebookシェアのリンクや要約がなかったので、以下の2つのスクリプトを次のとおり弄って追加した。

• /themes/google_simple/views/blog/includes/post.bit（記事一覧表示用スクリプト）
• /themes/google_simple/views/post/includes/post.bit（個別記事表示用スクリプト）

コードの修正内容

/themes/google_simple/views/blog/includes/post.bit（記事一覧表示用スクリプト）

<article class="post">

  <header class="post">
    <h1 class="title"><a href="<?php echo Post::permalink() ?>"><?php echo Post::title() ?></a></h1>
    <!-- ここから修正 -->
    <p class="description"><?php echo Post::description() ?></p>
    <p class="date"><?php echo Post::published() ?> | <a href="<?php echo Url::category(Post::category('slug')); ?>"><?php echo Post::category() ?></a></p>
    <!-- ここまで修正 -->
  </header>

  <div class="post-content">
    <?php echo Post::content() ?>
  </div>

  <footer class="post">

    <span>
      <a href="<?php echo Post::permalink() ?>"><?php echo Post::read_more()?$Language->get('read more'):$Language->get('permalink'); ?></a>
    </span>

    <span class="comment-count">
      <?php echo Post::comment_count_link() ?>
    </span>

    <!-- ここから追加 -->
    <span class="share">
      <a href="<?php echo Post::tweet_link() ?>" target="_blank" rel="noopener">Tweet</a>
    </span>

    <span class="share">
      <a href="<?php echo Post::facebook(Post::title()) ?>" target="_blank" rel="noopener">Facebook</a>
    </span>

    <span class="post-tags">
      <?php echo $Language->get('tags').':'.Post::tags() ?>
    </span>
    <!-- ここまで追加 -->

  </footer>

</article>

/themes/google_simple/views/post/includes/post.bit（個別記事表示用スクリプト）

<article class="post">

  <header class="post">
    <h1 class="title"><a href="<?php echo Post::permalink() ?>"><?php echo Post::title() ?></a></h1>
    <!-- ここから修正 -->
    <p class="description"><?php echo Post::description() ?></p>
    <p class="date"><?php echo Post::published() ?> | <a href="<?php echo Url::category(Post::category('slug')); ?>"><?php echo Post::category() ?></a></p>
    <!-- ここまで修正 -->
  </header>

  <div class="post-content">
    <?php echo Post::content(true) ?>
  </div>

  <!-- ここから追加 -->
  <footer class="post">

    <span class="share">
      <a href="<?php echo Post::tweet_link() ?>" target="_blank" rel="noopener">Tweet</a>
    </span>

    <span class="share">
      <a href="<?php echo Post::facebook(Post::title()) ?>" target="_blank" rel="noopener">Facebook</a>
    </span>

    <span class="post-tags">
      <?php echo $Language->get('tags').':'.Post::tags() ?>
    </span>

  </footer>
  <!-- ここまで追加 -->

</article>

/themes/google_simple/css/post.cssもそれ用に調整。

article.post header.post p.description {
    border-top: 2px dotted #CCC;
    padding: 5px 0;
    font-size: 0.9em;
    text-align: justify;
}

article.post header.post p.date {
    margin-top: 1em;
    font-size: 0.9em;
    text-align: right;
}

article.post footer.post span.post-tags ul {
    display: inline;
    padding: 0;
}

article.post footer.post span.post-tags li {
    display: inline;
    padding: 0 0.3em;
    vertical-align: baseline;
}

まとめ

TweetとFacebookシェアのリンクURLは次のとおりらしい。

<!-- Tweet用のリンクURL -->
https://twitter.com/share?url=URLエンコードされた記事のパーマリンク
<!-- Facebookシェア用のリンクURL -->
https://www.facebook.com/sharer/sharer.php?u=URLエンコードされた記事のパーマリンク