WordPress 提示词
|
18
|
0
|
未分类

418 字
|
15 分钟

wordpress 详情页显示顺序

  • header

  • Feature Image

  • breadcrumb

  • categories

  • post 标题

  • 发布日期

  • 内容

  • 社交分享

  • tags

  • 相关文章

  • 上一篇 下一篇

  • sidebar

  • footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <header class="bg-gray-800 text-white p-4">
        <!-- Header content -->
    </header>

    <div class="container mx-auto my-8">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <!-- Feature Image -->
            <div class="mb-4">
                <?php if (has_post_thumbnail()) : ?>
                    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" class="w-full h-auto">
                <?php endif; ?>
            </div>

            <!-- Breadcrumb Navigation -->
            <nav class="mb-4" aria-label="breadcrumb">
                <ul class="list-reset flex text-grey-dark">
                    <li><a href="<?php echo home_url(); ?>" class="text-blue-500 hover:text-blue-700">首页</a></li>
                    <?php
                    // 如果是分类页面
                    if (is_category() || is_single()) {
                        $category = get_the_category();
                        if ($category) {
                            $cat_parents = get_category_parents($category[0]->term_id, true, '</li><li>/');
                            echo '<li>' . rtrim($cat_parents, '/') . '</li>';
                        }
                        if (is_single()) {
                            echo '<li>/</li><li>' . get_the_title() . '</li>';
                        }
                    } elseif (is_page()) { // 如果是页面
                        if ($post->post_parent) { // 如果有父页面
                            $parent_id  = $post->post_parent;
                            $breadcrumbs = array();
                            while ($parent_id) {
                                $page = get_page($parent_id);
                                $breadcrumbs[] = '<li><a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a></li>';
                                $parent_id  = $page->post_parent;
                            }
                            $breadcrumbs = array_reverse($breadcrumbs);
                            foreach ($breadcrumbs as $crumb) echo $crumb . '<li>/</li>';
                        }
                        echo '<li>' . get_the_title() . '</li>';
                    } elseif (is_home()) { // 如果是主页
                        echo '<li>/</li><li>博客</li>';
                    } elseif (is_search()) { // 如果是搜索结果页面
                        echo '<li>/</li><li>搜索结果</li>';
                    }
                    ?>
                </ul>
            </nav>

            <!-- Tags -->
            <div class="mb-4">
                <?php 
                $post_tags = get_the_tags();
                if ($post_tags) {
                    foreach ($post_tags as $tag) {
                        echo '<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#' . $tag->name . '</span>'; 
                    }
                }
                ?>
            </div>

            <!-- Post Title -->
            <h1 class="text-3xl font-bold mb-4"><?php the_title(); ?></h1>

            <!-- Publish Date -->
            <p class="text-gray-600 mb-4">Published on: <?php echo get_the_date(); ?></p>

            <!-- Post Content -->
            <div class="prose mb-8">
                <?php the_content(); ?>
            </div>

            <!-- Social Sharing -->
            <div class="mb-8">
                <!-- Social sharing buttons -->
            </div>

            <!-- Tags (again) -->
            <div class="mb-8">
                <?php 
                $post_tags = get_the_tags();
                if ($post_tags) {
                    foreach ($post_tags as $tag) {
                        echo '<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#' . $tag->name . '</span>'; 
                    }
                }
                ?>
            </div>

            <!-- Related Posts -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">相关文章</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <?php
                    $current_post_id = get_the_ID();
                    $categories = wp_get_post_categories($current_post_id);
                    $related_posts = get_posts(array(
                        'category__in' => $categories,
                        'numberposts' => 3, // 调整这个数字来改变显示的相关文章数量
                        'post__not_in' => array($current_post_id)
                    ));

                    if ($related_posts) {
                        foreach ($related_posts as $post) {
                            setup_postdata($post);
                            ?>
                            <div class="bg-white p-4 rounded-lg shadow">
                                <?php if (has_post_thumbnail()) : ?>
                                    <img src="<?php the_post_thumbnail_url('medium'); ?>" alt="<?php the_title(); ?>" class="w-full h-auto mb-4">
                                <?php endif; ?>
                                <h3 class="text-xl font-semibold mb-2"><a href="<?php the_permalink(); ?>" class="text-blue-500 hover:text-blue-700"><?php the_title(); ?></a></h3>
                                <p class="text-gray-600"><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
                            </div>
                            <?php
                        }
                        wp_reset_postdata();
                    } else {
                        echo '<p class="text-gray-600">没有相关文章。</p>';
                    }
                    ?>
                </div>
            </div>

            <!-- Previous and Next Post Navigation -->
            <nav class="flex justify-between mb-8">
                <div><?php previous_post_link('%link', 'Previous Post'); ?></div>
                <div><?php next_post_link('%link', 'Next Post'); ?></div>
            </nav>

        <?php endwhile; endif; ?>

        <!-- Sidebar -->
        <aside class="w-full md:w-1/4 md:float-right mb-8">
            <!-- Sidebar content -->
        </aside>

    </div>

    <footer class="bg-gray-800 text-white p-4 mt-8">
        <!-- Footer content -->
    </footer>
</body>
</html>

wordpress 存档页显示顺序

  • header

  • breadcrumb

  • posts by category

  • 分页

  • sidebar

  • footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <header class="bg-gray-800 text-white p-4">
        <!-- Header content -->
    </header>

    <div class="container mx-auto my-8">
        <!-- Breadcrumb Navigation -->
        <nav class="mb-4" aria-label="breadcrumb">
            <ul class="list-reset flex text-grey-dark">
                <li><a href="<?php echo home_url(); ?>" class="text-blue-500 hover:text-blue-700">首页</a></li>
                <?php
                if (is_category() || is_single()) {
                    $category = get_the_category();
                    if ($category) {
                        $cat_parents = get_category_parents($category[0]->term_id, true, '</li><li>/');
                        echo '<li>' . rtrim($cat_parents, '/') . '</li>';
                    }
                    if (is_single()) {
                        echo '<li>/</li><li>' . get_the_title() . '</li>';
                    }
                } elseif (is_page()) {
                    if ($post->post_parent) {
                        $parent_id  = $post->post_parent;
                        $breadcrumbs = array();
                        while ($parent_id) {
                            $page = get_page($parent_id);
                            $breadcrumbs[] = '<li><a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a></li>';
                            $parent_id  = $page->post_parent;
                        }
                        $breadcrumbs = array_reverse($breadcrumbs);
                        foreach ($breadcrumbs as $crumb) echo $crumb . '<li>/</li>';
                    }
                    echo '<li>' . get_the_title() . '</li>';
                } elseif (is_home()) {
                    echo '<li>/</li><li>博客</li>';
                } elseif (is_search()) {
                    echo '<li>/</li><li>搜索结果</li>';
                }
                ?>
            </ul>
        </nav>

        <!-- Posts by Category -->
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $category_id = get_queried_object_id();
        $args = array(
            'posts_per_page' => 6, // 每页显示的文章数量
            'paged' => $paged,
            'cat' => $category_id
        );
        $custom_query = new WP_Query($args);
        ?>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
            <?php if ($custom_query->have_posts()) : while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
                <div class="bg-white p-4 rounded-lg shadow">
                    <?php if (has_post_thumbnail()) : ?>
                        <img src="<?php the_post_thumbnail_url('medium'); ?>" alt="<?php the_title(); ?>" class="w-full h-auto mb-4">
                    <?php endif; ?>
                    <h2 class="text-xl font-semibold mb-2"><a href="<?php the_permalink(); ?>" class="text-blue-500 hover:text-blue-700"><?php the_title(); ?></a></h2>
                    <p class="text-gray-600"><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
                </div>
            <?php endwhile; else : ?>
                <p class="text-gray-600">没有找到相关文章。</p>
            <?php endif; ?>
        </div>

        <!-- Pagination -->
        <div class="mb-8">
            <?php numeric_pagination($custom_query); ?>
        </div>

        <!-- Sidebar -->
        <aside class="w-full md:w-1/4 md:float-right mb-8">
            <!-- Search Form -->
            <div class="bg-white p-4 rounded-lg shadow mb-8">
                <?php get_search_form(); ?>
            </div>

            <!-- Promotional Images -->
            <div class="bg-white p-4 rounded-lg shadow mb-8">
                <a href="<?php echo home_url('/page-1'); ?>">
                    <img src="path/to/your/image1.jpg" alt="Promotion 1" class="w-full h-auto mb-4">
                </a>
                <a href="<?php echo home_url('/page-2'); ?>">
                    <img src="path/to/your/image2.jpg" alt="Promotion 2" class="w-full h-auto">
                </a>
            </div>
        </aside>
    </div>

    <footer class="bg-gray-800 text-white p-4 mt-8">
        <!-- Footer content -->
    </footer>

    <?php wp_reset_postdata(); ?>
</body>
</html>

你可以在 sidebar 部分中使用 get_search_form() 函数来添加搜索表单，并且可以用 Tailwind CSS 来调整它的样式。在你的主题文件夹中添加或编辑 searchform.php 文件，以便更好地控制搜索表单的样式，例如：

<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x('Search for:', 'label'); ?></span>
        <input type="search" class="search-field bg-gray-100 border border-gray-300 rounded py-2 px-4 w-full"
            placeholder="<?php echo esc_attr_x('Search …', 'placeholder'); ?>"
            value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <?php echo esc_attr_x('Search', 'submit button'); ?>
    </button>
</form>
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇