feat:add widget cateogry card

bigfa · Mar 26, 2024 · a0ff290 · a0ff290
1 parent a08f10b
commit a0ff290
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,17 @@
 
 [中文说明](https://github.com/bigfa/Farallon/blob/develop/README_CN.md)
 
-latest version : `0.4.3`
+latest version : `0.4.4`
 
 [Simple User Guide(Chinese)](https://fatesinger.com/101971)
 
 ## Changelog
 
+### 0.4.4
+
+- detail style change
+- add widget cateogry card
+
 ### 0.4.3
 
 - term list style change

diff --git a/README_CN.md b/README_CN.md
@@ -2,14 +2,19 @@
 
 ![Wordpress 主题 Farallon](https://static.fatesinger.com/2023/06/u1ak8xgmyn9ec24r.png)
 
-最新版本: `0.4.3`
+最新版本: `0.4.4`
 
 本主题禁止各种修改作者链接打包重新发布的行为。
 
 [简单的使用文档](https://fatesinger.com/101971)
 
 ## 更新日志
 
+### 0.4.4
+
+- 细节样式调整
+- 增加了一个分类卡片小工具
+
 ### 0.4.3
 
 - 分类列表样式调整

diff --git a/build/css/app.min.css b/build/css/app.min.css
diff --git a/modules/widget.php b/modules/widget.php
@@ -20,11 +20,51 @@ function widget($args, $instance)
                 <p><?php echo $user->description; ?></p>
             </div>
         </div>
-<?php echo $after_widget;
+        <?php echo $after_widget;
     }
 }
+
+class Farallon_Widget_Category extends WP_Widget
+
+{
+    function __construct()
+    {
+        $widget_ops = array('description' => __('show your category card', 'Farallon'));
+        parent::__construct('about', __('Categories', 'Farallon'), $widget_ops);
+    }
+
+    function widget($args, $instance)
+    {
+        extract($args);
+        echo $before_widget;
+        $categories = get_terms([
+            'taxonomy' => 'category',
+            'hide_empty' => false,
+            // 'orderby' => 'meta_value_num',
+            'order' => 'DESC',
+            // 'meta_key' => '_views',
+        ]);
+        echo '<div class="widget--category">';
+        foreach ($categories as $category) {
+            $link = get_term_link($category, 'category')
+        ?>
+            <a class="widget--category--item" title="<?php echo $category->name; ?>" aria-label="<?php echo $category->name; ?>" href="<?php echo $link; ?>" data-count="<?php echo $category->count; ?>">
+                <?php if (get_term_meta($category->term_id, '_thumb', true)) : ?>
+                    <img class="widget--category--image" alt="<?php echo $category->name; ?>" aria-label="<?php echo $category->name; ?>" src="<?php echo get_term_meta($category->term_id, '_thumb', true); ?>">
+                <?php endif ?>
+                <div class="widget--category--meta">
+                    <div class="widget--category--title"><?php echo $category->name; ?></div>
+                </div>
+            </a>
+<?php }
+        echo '</div>';
+        echo $after_widget;
+    }
+}
+
 add_action('widgets_init', 'farallon_widget_init');
 function farallon_widget_init()
 {
     register_widget('Farallon_Widget');
+    register_widget('Farallon_Widget_Category');
 }
diff --git a/scss/modules/graph.scss b/scss/modules/graph.scss
@@ -346,3 +346,11 @@
         }
     }
 }
+
+.wp-caption {
+    &-text {
+        text-align: center;
+        font-size: 12px;
+        color: var(--farallon-text-light);
+    }
+}
diff --git a/scss/templates/footer.scss b/scss/templates/footer.scss
@@ -206,3 +206,64 @@
         }
     }
 }
+
+.widget--category {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 12px;
+    padding-top: 15px;
+    &--item {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        height: 150px;
+    }
+
+    &--image {
+        width: 100%;
+        height: 100px;
+        object-fit: cover;
+        border-radius: 5px;
+    }
+
+    &--title {
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+        position: relative;
+        // margin-top: 10px;
+    }
+
+    &--meta {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
+            border-radius: 5px;
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .widget--category {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 414px) {
+    .widget--category {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}
diff --git a/style.css b/style.css
@@ -4,6 +4,6 @@ Theme URI: https://github.com/bigfa/Farallon
 Author: bigfa
 Author URI: https://github.com/bigfa
 Description: theme 2024
-Version: 0.4.3
+Version: 0.4.4
 Tags: Minimalism, Responsive
 */