{"id":50709218,"url":"https://github.com/coowinit/wordpress-alternating-blog-card-layout","last_synced_at":"2026-06-09T14:01:45.858Z","repository":{"id":360635914,"uuid":"1251020864","full_name":"coowinit/wordpress-alternating-blog-card-layout","owner":"coowinit","description":"一个适用于 WordPress 博客列表页的左右交错式文章卡片布局，支持桌面端图片与文本重叠展示，移动端自动切换为图片在上、内容在下的响应式结构。","archived":false,"fork":false,"pushed_at":"2026-05-27T07:20:26.000Z","size":299,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T09:13:53.677Z","etag":null,"topics":["blog-layout","card-layout","css-grid","html-css-js","responsive-layout","svg","wordpress","wordpress-loop","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/wordpress-alternating-blog-card-layout/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-27T07:07:57.000Z","updated_at":"2026-05-27T07:20:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/wordpress-alternating-blog-card-layout","commit_stats":null,"previous_names":["coowinit/wordpress-alternating-blog-card-layout"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/wordpress-alternating-blog-card-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwordpress-alternating-blog-card-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwordpress-alternating-blog-card-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwordpress-alternating-blog-card-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwordpress-alternating-blog-card-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/wordpress-alternating-blog-card-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwordpress-alternating-blog-card-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog-layout","card-layout","css-grid","html-css-js","responsive-layout","svg","wordpress","wordpress-loop","wordpress-theme"],"created_at":"2026-06-09T14:01:44.983Z","updated_at":"2026-06-09T14:01:45.849Z","avatar_url":"https://github.com/coowinit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WordPress 左右交错式博客卡片布局\n\n一个适用于 WordPress 博客列表页、企业新闻列表页、内容营销文章列表页的响应式前端布局示例。\n\n该项目使用 **HTML + CSS + JavaScript** 实现桌面端左右交错式文章卡片效果，并考虑了后期集成到 WordPress 主题模板时的循环输出方式。\n\n---\n\n## 效果预览\n\n![WordPress 左右交错式博客卡片布局预览](docs/screenshots/blog-card-layout-preview.png)\n\n---\n\n## 项目特点\n\n- 桌面端支持图片与文字卡片左右交错展示\n- 文字内容卡片可叠压到图片区域上，增强页面层次感\n- 奇数行与偶数行自动形成交替布局\n- 已优化奇数行和偶数行文字卡片宽度一致性\n- 移动端自动切换为图片在上、文字在下的结构\n- CSS、JS、图片资源独立分离，便于维护\n- 使用 SVG 占位图，方便后期替换为真实文章特色图片\n- 提供 WordPress Loop 示例，便于主题开发时循环输出文章列表\n\n---\n\n## 目录结构\n\n```text\nwordpress-alternating-blog-card-layout/\n├── index.html\n├── wordpress-loop-example.php\n├── README.md\n├── assets/\n│   ├── css/\n│   │   └── blog-layout.css\n│   ├── js/\n│   │   └── blog-layout.js\n│   └── images/\n│       ├── blog-card-01.svg\n│       ├── blog-card-02.svg\n│       ├── blog-card-03.svg\n│       └── blog-card-04.svg\n└── docs/\n    └── screenshots/\n        └── blog-card-layout-preview.png\n```\n\n---\n\n## 文件说明\n\n### `index.html`\n\n静态 HTML 预览页面，用于直接查看布局效果。\n\n适合用于：\n\n- 本地预览\n- 前端样式调试\n- GitHub Pages 展示\n- 后期改造成 WordPress 模板前的参考页面\n\n### `assets/css/blog-layout.css`\n\n核心样式文件，包含：\n\n- 页面容器布局\n- 博客卡片布局\n- 图片与文字卡片重叠效果\n- 奇偶行左右交错规则\n- 响应式适配规则\n- 移动端图片在上、文字在下的布局\n\n### `assets/js/blog-layout.js`\n\n独立 JavaScript 文件。\n\n当前主要用于保留后期扩展能力，例如：\n\n- 加载更多文章\n- Ajax 请求文章列表\n- 滚动动画\n- 点击统计\n- 卡片进入视口动画\n\n### `assets/images/`\n\n存放 SVG 占位图。\n\n实际集成到 WordPress 时，可以替换为文章特色图片：\n\n```php\n\u003c?php the_post_thumbnail('large'); ?\u003e\n```\n\n### `wordpress-loop-example.php`\n\nWordPress 循环输出示例文件。\n\n这个文件展示了如何在 WordPress 中根据文章循环索引自动添加奇偶行样式，例如：\n\n```php\n$is_reverse = $index % 2 === 1 ? ' is-reverse' : '';\n```\n\n这样可以让文章列表在程序循环输出时自动形成左右交错布局。\n\n---\n\n## 布局逻辑说明\n\n桌面端布局主要分为两种状态：\n\n### 奇数卡片\n\n图片在左侧，文字卡片在右侧，并向图片方向产生一定重叠。\n\n```html\n\u003carticle class=\"blog-card\"\u003e\n  ...\n\u003c/article\u003e\n```\n\n### 偶数卡片\n\n文字卡片在左侧，图片在右侧，并向图片方向产生一定重叠。\n\n```html\n\u003carticle class=\"blog-card is-reverse\"\u003e\n  ...\n\u003c/article\u003e\n```\n\n通过给偶数项添加 `is-reverse` 类名，即可实现交错效果。\n\n---\n\n## 移动端适配\n\n移动端时，不再保留左右交错与重叠结构，而是统一改为：\n\n```text\n图片\n文字内容\n```\n\n这样可以保证手机端阅读体验更清晰，也避免文字卡片和图片在小屏幕上出现挤压。\n\n---\n\n## WordPress 集成思路\n\n在 WordPress 主题模板中，可以将每篇文章作为一个 `article.blog-card` 输出。\n\n示例逻辑：\n\n```php\n\u003c?php\n$index = 0;\nif ( have_posts() ) :\n  while ( have_posts() ) : the_post();\n    $reverse_class = $index % 2 === 1 ? ' is-reverse' : '';\n?\u003e\n\n\u003carticle class=\"blog-card\u003c?php echo esc_attr($reverse_class); ?\u003e\"\u003e\n  \u003ca class=\"blog-card__image\" href=\"\u003c?php the_permalink(); ?\u003e\"\u003e\n    \u003c?php if ( has_post_thumbnail() ) : ?\u003e\n      \u003c?php the_post_thumbnail('large'); ?\u003e\n    \u003c?php endif; ?\u003e\n  \u003c/a\u003e\n\n  \u003cdiv class=\"blog-card__content\"\u003e\n    \u003cdiv class=\"blog-card__categories\"\u003e\n      \u003c?php the_category(', '); ?\u003e\n    \u003c/div\u003e\n\n    \u003ch2 class=\"blog-card__title\"\u003e\n      \u003ca href=\"\u003c?php the_permalink(); ?\u003e\"\u003e\u003c?php the_title(); ?\u003e\u003c/a\u003e\n    \u003c/h2\u003e\n\n    \u003cdiv class=\"blog-card__date\"\u003e\n      \u003c?php echo get_the_date(); ?\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\n\u003c?php\n    $index++;\n  endwhile;\nendif;\n?\u003e\n```\n\n---\n\n## 后期可扩展方向\n\n后期可以继续扩展以下功能：\n\n- 添加文章摘要\n- 添加作者信息\n- 添加阅读更多按钮\n- 支持 Ajax Load More 加载更多\n- 添加分类筛选功能\n- 添加文章卡片进入视口动画\n- 接入 WordPress REST API\n- 改造成 Gutenberg 区块\n- 改造成 Elementor 自定义组件\n- 用于 WooCommerce 内容营销文章列表页\n\n---\n\n## 适用场景\n\n- WordPress 博客列表页\n- 企业官网新闻中心\n- WooCommerce 内容营销页面\n- 插件官网文章列表\n- 产品教程文章列表\n- 案例展示列表页\n- 前端布局学习示例\n\n---\n\n## 版本记录\n\n### v1.0.0\n\n完成 WordPress 左右交错式博客卡片布局初始版本。\n\n主要更新：\n\n- 新增静态 HTML 页面\n- 新增独立 CSS 和 JS 文件\n- 新增 SVG 占位插画\n- 新增 WordPress Loop 示例\n- 实现桌面端图片与文字卡片重叠效果\n- 实现奇数行与偶数行左右交错布局\n- 修复偶数行文字卡片位移方向问题\n- 优化奇数行与偶数行文字卡片宽度一致性\n- 实现移动端图片在上、文字在下的响应式布局\n\n---\n\n## License\n\n本项目可作为 WordPress 主题开发、前端页面练习和企业网站页面设计参考使用。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwordpress-alternating-blog-card-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fwordpress-alternating-blog-card-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwordpress-alternating-blog-card-layout/lists"}