Hướng dẫn nâng cấp tiện ích PopularPosts lên version 2

Bài này chỉ áp dụng khi bạn đã nâng cấp mẫu chủ đề lên layout version 3, nếu các bạn chưa biết nâng cấp thì tham khảo trên mạng đã có rất nhiều bài hướng dẫn. Sự khác biệt chính của layout version 3 vẫn cho phép bạn sử dụng widget version 1 như widget PopularPosts chẳng hạn cùng với các widget version 2 khác. Vì một vài lý do nào đó mà bạn vẫn còn sử dụng version 1 như ngại chỉnh sửa vì version 2 sử dụng các phần tử khác với version 1 và rất khó chỉnh sửa nếu bạn không thạo về các thẻ dữ liệu bố cục của widget.

Lợi ích khi nâng cấp tiện ích PopularPosts lên version 2, bạn thêm được các tùy chọn hiển thị thông tin của 1 posts như: tên tác giả, ngày đăng, số nhận xét, tên nhãn, hiển thị liên kết bài qua email, hiển thị nút chia sẻ như trong tiện ích bài đăng trên Blog mà version 1 không có.

Khi bạn chọn thêm mới tiện ích PopularPosts, trong bố cục của tiện ích có cấu trúc XML mặc định như sau:

Copy


<b:widget id='PopularPosts1' locked='true' title='Phổ biến trong tuần' type='PopularPosts' version='2' visible='true'>

  <b:widget-settings>⋯</b:widget-settings>

  <b:includable id='main' var='this'>

    <b:include name='widget-title'/>

    <div class='widget-content'>

      <b:include name='snippetedPosts'/>

    </div>

  </b:includable>

</b:widget>

Khi hiển thị, bố cục HTML của tiện ích có dạng sau:

Copy


<div class="widget PopularPosts" data-version="2" id="PopularPosts1">

  <h3 class="title">Bài đăng phổ biến</h3>

  <div class="widget-content">

    <div role="feed">

      <article class="post" role="article">

        <div class="post-content">

          <h3 class="post-title">Tiêu đề</h3>

          <div class="post-snippet snippet-container r-snippet-container">Đoạn trích</div>

          <div class="item-thumbnail">Ảnh</div>

        </div>

      </article>

      <article class="post" role="article">⋯</article>

      <article class="post" role="article">⋯</article>

      <article class="post" role="article">⋯</article>

      <article class="post" role="article">⋯</article>

    </div>

  </div>

</div>

Để đơn giản hóa, mình đã cấu hình sẵn các thẻ bố cục của widget thay lại bằng các class cũ giống như version 1 để khi các bạn thay vào không phải chỉnh sửa lại css nhiều và mình chỉ thêm hiển thị tùy chọn tên nhãn và ngày đăng, các bạn thêm mẫu XML sau ngay dưới thẻ </b:includable> của thẻ <b:includable id='main' var='this'> của tiện ích thành như sau:

Copy


<b:includable id='main' var='this'>

  <b:include name='widget-title'/>

  <div class='widget-content'>

    <b:include name='snippetedPosts'/>

  </div>

</b:includable>

<b:includable id='postLabels'>

  <b:if cond='data:widgets.Blog.first.allBylineItems.labels'>

     <data:widgets.Blog.first.allBylineItems.timestamp.label/>

    <span class='item-label'>

      <b:loop values='data:post.labels.length - 1' var='label'>

        <a expr:href='data:post.labels[label].url.canonical' expr:title='data:post.labels[label].name'>

          <b:eval expr='data:post.labels[label].name'/>

        </a>

      </b:loop>

    </span>

  </b:if>

</b:includable>

<b:includable id='postSnippet'>

  <div class='item-snippet'>

    <b:eval expr='data:post.snippets.short'/>

  </div>

</b:includable>

<b:includable id='postTimestamp'>

  <b:if cond='data:widgets.Blog.first.allBylineItems.timestamp'>

     <data:widgets.Blog.first.allBylineItems.timestamp.label/>

    <span class='item-published'>

      <b:eval expr='data:post.date format &quot;dd/MM/yyyy&quot; '/>

    </span>

  </b:if>

</b:includable>

<b:includable id='snippetedPostByline'>

  <div class='item-meta'>

    <b:include name='postLabels'/>

    <b:include name='postTimestamp'/>

  </div>

</b:includable>

<b:includable id='snippetedPostContent'>

  <div class='item-content'>

    <b:include cond='data:postDisplay.showFeaturedImage' name='snippetedPostThumbnail'/>

    <b:include name='snippetedPostByline'/>

    <b:include name='snippetedPostTitle'/>

    <b:include cond='data:postDisplay.showSnippet' name='postSnippet'/>

  </div>

</b:includable>

<b:includable id='snippetedPostThumbnail'>

  <div class='item-thumbnail'>

    <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

      <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [200,320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>

    </a>

  </div>

</b:includable>

<b:includable id='snippetedPostTitle'>

  <div class='item-title'>

    <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

      <data:post.title/>

    </a>

  </div>

</b:includable>

<b:includable id='snippetedPosts'>

  <ul>

    <b:loop values='data:posts' var='post'>

      <li><b:include name='snippetedPostContent'/></li>

    </b:loop>

  </ul>

</b:includable>

Ảnh minh họa

Khi hiển thị, bố cục HTML của tiện ích có dạng:

Copy


<div class="widget PopularPosts" data-version="2" id="PopularPosts1">

  <h3 class="title">Bài đăng phổ biến</h3>

  <div class="widget-content">

    <ul>

      <li>

        <div class="item-content">

          <div class="item-thumbnail">Ảnh</div>

          <div class="item-meta">

            <span class="item-label">Tên nhãn</span>

            <span class="item-published">Ngày đăng</span>

          </div>

          <div class="item-title">Tiêu đề</div>

          <div class="item-snippet">Đoạn tóm tắt</div>

        </div>

      </li>

      <li>⋯</li>

      <li>⋯</li>

      <li>⋯</li>

      <li>⋯</li>

    </ul>

  </div>

</div>