Untitled

avatar
unknown
plain_text
a year ago
9.7 kB
14
Indexable
<?php
/**
 * The template for displaying search content.
 *
 * @package Theme Freesia
 * @subpackage Zon
 * @since Zon 1.0
 */
$zon_settings = zon_get_theme_options(); ?>

<style>
/* Search Results Styling - Updated to match Figma */
.search-result-item {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
    border: none;
    display: block;
    width: 100%;
    max-width: 400px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.search-item-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

.post-image-content {
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
}

.post-featured-image {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    transition: transform 0.3s ease;
}

.search-result-item:hover .post-featured-image img {
    transform: scale(1.05);
}

.post-content-wrapper {
    padding: 20px;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Title styling - bolder and more prominent */
.entry-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.entry-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-title a:hover {
    color: #007cba;
}

/* Meta styling - more compact and refined */
.meta-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #666666;
    margin-bottom: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.meta-item i {
    font-size: 12px;
    color: #888888;
    opacity: 0.8;
}

.meta-item a {
    color: #666666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.meta-item a:hover {
    color: #007cba;
}

/* Categories - more refined design */
.category-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.category-tag {
    background: #007cba;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-tag:hover {
    background: #005a8b;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Authors list - better typography */
.authors-list {
    color: #555555;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Read More link - more prominent */
.read-more-link {
    color: #007cba;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-more-link:hover {
    color: #005a8b;
    transform: translateX(4px);
}

.read-more-link:after {
    content: "→";
    margin-left: 8px;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.read-more-link:hover:after {
    transform: translateX(4px);
}

/* Entry summary improvements */
.entry-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .search-result-item {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .post-image-content {
        height: 200px;
    }
    
    .meta-wrapper {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .post-content-wrapper {
        padding: 16px;
    }
    
    .entry-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .post-image-content {
        height: 180px;
    }
    
    .category-tags {
        gap: 6px;
    }
    
    .category-tag {
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* Additional enhancements for visual hierarchy */
.search-result-item .post-content-wrapper {
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* Improved focus states for accessibility */
.search-result-item a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Loading state placeholder (optional) */
.search-result-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .search-result-item {
        background: #2a2a2a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .entry-title a {
        color: #ffffff;
    }
    
    .entry-title a:hover {
        color: #4da6d9;
    }
    
    .meta-wrapper {
        color: #cccccc;
    }
    
    .authors-list {
        color: #dddddd;
    }
    
    .post-content-wrapper {
        background: #2a2a2a;
    }
}
</style>

<article id="post-<?php the_ID(); ?>" <?php post_class('search-result-item');?>>
    <div class="search-item-wrapper">
        <?php $zon_blog_post_image = $zon_settings['zon_blog_post_image'];
        if( has_post_thumbnail() && $zon_blog_post_image == 'on') { ?>
            <div class="post-image-content">
                <figure class="post-featured-image">
                    <a href="<?php the_permalink();?>" title="<?php echo the_title_attribute('echo=0'); ?>">
                        <?php the_post_thumbnail('large'); ?>
                    </a>
                </figure>
            </div>
        <?php } ?>
        
        <div class="post-content-wrapper">
            <header class="entry-header">
                <h3 class="entry-title">
                    <a href="<?php the_permalink(); ?>" title="<?php echo the_title_attribute('echo=0'); ?>">
                        <?php the_title();?>
                    </a>
                </h3>
            </header>
            
            <div class="meta-wrapper">
                <?php if ( 'post' === get_post_type() ) : ?>
                    <div class="meta-item post-date">
                        <i class="fa fa-calendar"></i>
                        <span><?php echo get_the_time( 'M j, Y' ); ?></span>
                    </div>
                    
                    <div class="meta-item post-author">
                        <i class="fa fa-user"></i>
                        <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
                            <?php the_author(); ?>
                        </a>
                    </div>
                <?php endif;?>
            </div>
            
            <?php if( has_category() ) : ?>
                <div class="category-tags">
                    <?php 
                    $categories = get_the_category();
                    $category_count = 0;
                    foreach($categories as $category) {
                        if($category_count >= 2) break; // Limit to 2 categories for cleaner look
                        echo '<a href="' . get_category_link($category->term_id) . '" class="category-tag">' . esc_html($category->name) . '</a>';
                        $category_count++;
                    }
                    ?>
                </div>
            <?php endif; ?>
            
            <div class="entry-summary">
                <?php 
                // Debug: Hiển thị tại sao bài viết này xuất hiện trong kết quả tìm kiếm
                if (isset($_GET['s']) && !empty($_GET['s'])) {
                    $search_term = $_GET['s'];
                    $post_title = get_the_title();
                    $post_content = get_the_content();
                    
                    // Kiểm tra xem từ khóa có trong title hoặc content không
                    $title_match = stripos($post_title, $search_term) !== false;
                    $content_match = stripos($post_content, $search_term) !== false;
                    
                    if (!$title_match && !$content_match) {
                        echo '<div style="background: #ffebee; padding: 8px; margin-bottom: 10px; font-size: 12px; border-radius: 4px; color: #c62828;">';
                        echo 'This article does not contain the word "' . esc_html($search_term) . '" trong title hoặc content';
                        echo '</div>';
                    } else {
                        echo '<div style="background: #e8f5e8; padding: 8px; margin-bottom: 10px; font-size: 12px; border-radius: 4px; color: #2e7d32;">';
                        echo 'Find "' . esc_html($search_term) . '" in: ';
                        if ($title_match) echo 'TITLE ';
                        if ($content_match) echo 'CONTENT ';
                        echo '</div>';
                    }
                }
                
                // Hiển thị danh sách tác giả nếu có
                $authors = get_post_meta(get_the_ID(), 'authors', true);
                if ($authors) {
                    echo '<div class="authors-list">Authors: ' . esc_html($authors) . '</div>';
                }
                ?>
                
                <a href="<?php the_permalink(); ?>" class="read-more-link">
                    Read More
                </a>
            </div>
        </div>
    </div>
</article>
Editor is loading...
Leave a Comment