You've already forked wp-bootstrap
v0.2.0 - Design Editor: templates, patterns, header/footer variations
Full Design Editor compatibility with custom block categories, page templates, header/footer variations, and navigation styles. Both FSE (admin) and Twig (frontend) sides kept in sync. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -8,13 +8,17 @@
|
||||
<body {{ body_class() }}>
|
||||
{{ wp_body_open() }}
|
||||
|
||||
{% include 'partials/header.html.twig' %}
|
||||
{% block header %}
|
||||
{% include 'partials/header.html.twig' %}
|
||||
{% endblock %}
|
||||
|
||||
<main id="main-content" class="{% block main_class %}py-4{% endblock %}">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% include 'partials/footer.html.twig' %}
|
||||
{% block footer %}
|
||||
{% include 'partials/footer.html.twig' %}
|
||||
{% endblock %}
|
||||
|
||||
{{ wp_footer() }}
|
||||
</body>
|
||||
|
||||
18
views/pages/full-width.html.twig
Normal file
18
views/pages/full-width.html.twig
Normal file
@@ -0,0 +1,18 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid px-0">
|
||||
<article>
|
||||
{% if post.thumbnail %}
|
||||
<img src="{{ post.thumbnail }}" class="w-100 mb-4" alt="{{ post.title|e('html_attr') }}">
|
||||
{% endif %}
|
||||
<div class="container">
|
||||
<h1 class="mb-4">{{ post.title }}</h1>
|
||||
|
||||
<div class="post-content">
|
||||
{{ post.content|raw }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
21
views/pages/hero.html.twig
Normal file
21
views/pages/hero.html.twig
Normal file
@@ -0,0 +1,21 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block main_class %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="bg-primary text-white py-5 mb-5{% if post.thumbnail %} position-relative overflow-hidden{% endif %}">
|
||||
{% if post.thumbnail %}
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: url('{{ post.thumbnail }}') center/cover no-repeat; opacity: 0.3;"></div>
|
||||
{% endif %}
|
||||
<div class="container position-relative py-5 text-center">
|
||||
<h1 class="display-4 fw-bold">{{ post.title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container">
|
||||
<article>
|
||||
<div class="post-content">
|
||||
{{ post.content|raw }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
18
views/pages/landing.html.twig
Normal file
18
views/pages/landing.html.twig
Normal file
@@ -0,0 +1,18 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
{% block footer %}{% endblock %}
|
||||
|
||||
{% block main_class %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-5">
|
||||
<article>
|
||||
<h1>{{ post.title }}</h1>
|
||||
|
||||
<div class="post-content">
|
||||
{{ post.content|raw }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
24
views/pages/page-sidebar.html.twig
Normal file
24
views/pages/page-sidebar.html.twig
Normal file
@@ -0,0 +1,24 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<article>
|
||||
<h1 class="mb-4">{{ post.title }}</h1>
|
||||
{% if post.thumbnail %}
|
||||
<img src="{{ post.thumbnail }}" class="img-fluid rounded mb-4"
|
||||
alt="{{ post.title|e('html_attr') }}">
|
||||
{% endif %}
|
||||
|
||||
<div class="post-content">
|
||||
{{ post.content|raw }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
{% include 'partials/sidebar.html.twig' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
42
views/partials/footer-columns.html.twig
Normal file
42
views/partials/footer-columns.html.twig
Normal file
@@ -0,0 +1,42 @@
|
||||
<footer class="bg-dark text-light mt-auto">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<h5 class="fw-bold">{{ site.name }}</h5>
|
||||
<p class="text-body-secondary">{{ site.description }}</p>
|
||||
<p class="text-body-secondary small">{{ __('A modern WordPress theme built with Bootstrap 5.') }}</p>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<h5 class="fw-bold">{{ __('Navigation') }}</h5>
|
||||
{% if footer_menu|length > 0 %}
|
||||
<ul class="list-unstyled">
|
||||
{% for item in footer_menu %}
|
||||
<li class="mb-1">
|
||||
<a href="{{ item.url }}" class="text-body-secondary text-decoration-none">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h5 class="fw-bold">{{ __('About') }}</h5>
|
||||
<p class="text-body-secondary small">
|
||||
{{ __('This theme is proudly built with Bootstrap 5 and WordPress Full Site Editing.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-body-secondary small mb-0">© {{ current_year }} {{ site.name }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="text-body-secondary small mb-0">
|
||||
{{ __('Powered by %s')|format('<a href="https://wordpress.org" rel="nofollow" class="text-body-secondary">WordPress</a>')|raw }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
8
views/partials/footer-minimal.html.twig
Normal file
8
views/partials/footer-minimal.html.twig
Normal file
@@ -0,0 +1,8 @@
|
||||
<footer class="bg-body-tertiary mt-auto">
|
||||
<div class="container py-4">
|
||||
<hr class="mb-4">
|
||||
<p class="text-body-secondary text-center small mb-0">
|
||||
© {{ current_year }} {{ site.name }}. {{ __('All rights reserved.') }}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
59
views/partials/header-centered.html.twig
Normal file
59
views/partials/header-centered.html.twig
Normal file
@@ -0,0 +1,59 @@
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container flex-column">
|
||||
<a class="navbar-brand fw-bold mb-2" href="{{ site.url }}">
|
||||
{{ site.name }}
|
||||
</a>
|
||||
{% if site.description %}
|
||||
<p class="text-body-secondary small mb-2">{{ site.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#navbarMain"
|
||||
aria-controls="navbarMain" aria-expanded="false"
|
||||
aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-center" id="navbarMain">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0">
|
||||
{% for item in menu %}
|
||||
{% if item.children|length > 0 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for child in item.children %}
|
||||
<li>
|
||||
<a class="dropdown-item{{ child.active ? ' active' : '' }}"
|
||||
href="{{ child.url }}"
|
||||
{% if child.target %}target="{{ child.target }}"{% endif %}>
|
||||
{{ child.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}"
|
||||
{% if item.active %}aria-current="page"{% endif %}
|
||||
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if dark_mode %}
|
||||
{% include 'partials/dark-mode-toggle.html.twig' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
64
views/partials/header-offcanvas.html.twig
Normal file
64
views/partials/header-offcanvas.html.twig
Normal file
@@ -0,0 +1,64 @@
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="{{ site.url }}">
|
||||
{{ site.name }}
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas"
|
||||
aria-controls="navbarOffcanvas"
|
||||
aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvas"
|
||||
aria-labelledby="navbarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="navbarOffcanvasLabel">{{ site.name }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
|
||||
aria-label="{{ __('Close') }}"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
{% for item in menu %}
|
||||
{% if item.children|length > 0 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for child in item.children %}
|
||||
<li>
|
||||
<a class="dropdown-item{{ child.active ? ' active' : '' }}"
|
||||
href="{{ child.url }}"
|
||||
{% if child.target %}target="{{ child.target }}"{% endif %}>
|
||||
{{ child.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}"
|
||||
{% if item.active %}aria-current="page"{% endif %}
|
||||
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if dark_mode %}
|
||||
{% include 'partials/dark-mode-toggle.html.twig' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
56
views/partials/header-transparent.html.twig
Normal file
56
views/partials/header-transparent.html.twig
Normal file
@@ -0,0 +1,56 @@
|
||||
<header class="position-absolute w-100" style="z-index: 1030;">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="{{ site.url }}">
|
||||
{{ site.name }}
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#navbarMain"
|
||||
aria-controls="navbarMain" aria-expanded="false"
|
||||
aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarMain">
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
{% for item in menu %}
|
||||
{% if item.children|length > 0 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for child in item.children %}
|
||||
<li>
|
||||
<a class="dropdown-item{{ child.active ? ' active' : '' }}"
|
||||
href="{{ child.url }}"
|
||||
{% if child.target %}target="{{ child.target }}"{% endif %}>
|
||||
{{ child.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ item.active ? ' active' : '' }}"
|
||||
href="{{ item.url }}"
|
||||
{% if item.active %}aria-current="page"{% endif %}
|
||||
{% if item.target %}target="{{ item.target }}"{% endif %}>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if dark_mode %}
|
||||
{% include 'partials/dark-mode-toggle.html.twig' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
Reference in New Issue
Block a user