Last active
May 23, 2024 10:26
-
-
Save silvandiepen/aff8e27061ddc0843b00aed3de88f681 to your computer and use it in GitHub Desktop.
Wordpress + Nuxt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<BuildSections | |
v-if="page && page.fields && page.fields.layout_content" | |
:sections="page.fields.layout_content" | |
></BuildSections> | |
</template> | |
<script> | |
import BuildSections from '~/components/build-sections.vue'; | |
export default { | |
components: { | |
BuildSections | |
}, | |
head() { | |
return { | |
title: this.pageTitle, | |
titleTemplate: '%s - Website title' | |
}; | |
}, | |
computed: { | |
pageTitle() { | |
if (this.page && this.page.title && this.page.title.rendered) { | |
return this.page.title || this.page.title.rendered; | |
} else if (this.page && this.page.title) { | |
return this.page.title; | |
} else { | |
return ''; | |
} | |
}, | |
page() { | |
let route; | |
if (this.$route.params.pathMatch) { | |
route = this.$route.params.pathMatch.replace('/',''); | |
} else { | |
route = 'home'; | |
} | |
return this.$store.state.pages.pages[route]; | |
} | |
}, | |
async asyncData({ store, params, error }) { | |
await store.dispatch('pages/fetchPage', params.pathMatch).catch((e) => { | |
error(e); | |
}); | |
}, | |
created() { | |
this.$store.dispatch('pages/fetchPage', this.$route.params.pathMatch).catch(() => { | |
this.$nuxt.error({ statusCode: 404, message: 'Page not found' }); | |
}); | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="basic-content__wrapper"> | |
<div class="row center"> | |
<div class="column small-full medium-two-third large-10"> | |
<div class="basic-header__content"> | |
<h3 v-if="basicTitle">{{ basicTitle }}</h3> | |
<h4 v-if="basicSubtitle">{{ basicSubtitle}}</h4> | |
<template v-if="basicContent">{{ basicContent }}</template> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
components: {}, | |
props: { | |
content: { | |
type: [String, Object], | |
default: () => {} | |
} | |
}, | |
computed: { | |
basicTitle() { | |
return this.$props.content.block_title || null; | |
}, | |
basicSubtitle() { | |
return this.$props.content.block_subtitle || null; | |
}, | |
basicContent() { | |
if (typeof this.$props.content === 'string') { | |
return this.$props.content; | |
} | |
return this.$props.content.block_content || null; | |
} | |
}, | |
created() {} | |
}; | |
</script> | |
<style lang="css"> | |
.basic-content { | |
//styling here | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<main class="page"> | |
<template v-for="(section, idx) in sections"> | |
<section | |
v-if="section.acf_fc_layout !== 'repeating-block'" | |
:key="idx" | |
:class="section.acf_fc_layout" | |
:index="idx" | |
> | |
<component | |
:is="section.acf_fc_layout" | |
:key="idx" | |
:index="idx" | |
:content="section" | |
/> | |
</section> | |
<template v-else-if="section.layout_content.fields"> | |
<template v-for="(subSection, index) in section.layout_content.fields.layout_content"> | |
<section :key="`${index}sub`" :class="subSection.acf_fc_layout"> | |
<component | |
:is="subSection.acf_fc_layout" | |
:index="index" | |
:content="subSection" | |
/> | |
</section> | |
</template> | |
</template> | |
</template> | |
</main> | |
</template> | |
<script> | |
export default { | |
components: { | |
OneColumn: () => import('~/components/section/one-column.vue'), | |
TwoColumn: () => import('~/components/section/two-column.vue'), | |
CenterColumn: () => import('~/components/section/center-column.vue'), | |
BasicContent: () => import('~/components/section/basic-content.vue'), | |
}, | |
props: { | |
sections: { | |
type: Array, | |
default: () => [] | |
} | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<MainLayout></MainLayout> | |
</template> | |
<script> | |
import MainLayout from './_.vue'; | |
export default { | |
components: { MainLayout }, | |
async asyncData({ store, params }) { | |
await store.dispatch('pages/fetchPage', params.pathMatch); | |
} | |
}; | |
</script> | |
<style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Vue from 'vue'; | |
const storeCache = 300; // 300 in sec is 5 min | |
Date.time = function() { | |
const now = new Date(); | |
return now.getTime() / 1000; | |
}; | |
export const state = () => ({ | |
pages: {} | |
}); | |
export const mutations = { | |
setPage(state, page) { | |
page.lastFetched = Date.time(); | |
if (page.slug) { | |
if (page.slug.indexOf('/') > -1) { | |
Vue.set(state.pages, page.uri.replace('/', ''), page); | |
} | |
} else { | |
Vue.set(state.pages, page.name, page); | |
} | |
} | |
}; | |
export const actions = { | |
async fetchPage({ state, commit }, page) { | |
let slug; | |
if (page !== undefined) { | |
slug = page.replace('/', ''); | |
} else { | |
slug = 'home'; | |
page = 'home'; | |
} | |
if (!state.pages[slug] || state.pages[slug].lastFetched + storeCache < Date.time()) { | |
const content = await this.$axios.$get(`/pages/page?slug=${page}`); | |
commit('setPage', content); | |
} | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function get_pages_categories($ID) | |
{ | |
$cats = array(); | |
foreach (wp_get_post_categories($ID) as $cat) { | |
$cats[] = get_category($cat)->slug; | |
} | |
return $cats; | |
} | |
function get_pages_tags($ID) | |
{ | |
$tags = array(); | |
foreach (wp_get_post_tags($ID) as $tag) { | |
$tags[] = $tag->name; | |
} | |
return $tags; | |
} | |
function get_pages_all() | |
{ | |
$pages = array(); | |
$i = 0; | |
foreach (get_pages(array('numberpages' => 999)) as $post) { | |
if ($post->post_status === "publish") { | |
$pages[$i] = (object)array(); | |
$pages[$i]->ID = $post->ID; | |
$pages[$i]->title = $post->post_title; | |
$pages[$i]->name = $post->post_name; | |
$pages[$i]->slug = $post->post_name; | |
$pages[$i]->uri = get_page_uri($post->ID); | |
$pages[$i]->content = wpautop($post->post_content); | |
$pages[$i]->excerpt = wpautop($post->post_excerpt); | |
$pages[$i]->date = $post->post_date; | |
$pages[$i]->date_modified = $post->post_modified; | |
$pages[$i]->title = $post->post_title; | |
$pages[$i]->status = $post->post_status; | |
$pages[$i]->categories = get_pages_categories($post->ID); | |
$pages[$i]->tags = get_pages_tags($post->ID); | |
$pages[$i]->fields = get_fields($post->ID); | |
$pages[$i]->featured_image = get_the_post_thumbnail_url($post->ID); | |
$i++; | |
} | |
} | |
return $pages; | |
} | |
function get_pages_tag() | |
{ | |
$pages = array(); | |
$i = 0; | |
foreach (get_pages(array( | |
'tag' => $_GET['tag'], | |
'post_status' => 'publish' | |
)) as $post) { | |
if ($post->post_status === "publish") { | |
$pages[$i] = (object)array(); | |
$pages[$i]->ID = $post->ID; | |
$pages[$i]->title = $post->post_title; | |
$pages[$i]->name = $post->post_name; | |
$pages[$i]->slug = $post->post_name; | |
$pages[$i]->content = wpautop($post->post_content); | |
$pages[$i]->excerpt = wpautop($post->post_excerpt); | |
$pages[$i]->date = $post->post_date; | |
$pages[$i]->date_modified = $post->post_modified; | |
$pages[$i]->title = $post->post_title; | |
$pages[$i]->status = $post->post_status; | |
$pages[$i]->categories = get_pages_categories($post->ID); | |
$pages[$i]->tags = get_pages_tags($post->ID); | |
$pages[$i]->fields = get_fields($post->ID); | |
$pages[$i]->featured_image = get_the_post_thumbnail_url($post->ID); | |
$i++; | |
} | |
} | |
return $pages; | |
} | |
function get_page_by_slug($slug = null) | |
{ | |
$page = array(); | |
if (gettype($slug) === 'object') { | |
$slug = $_GET['slug']; | |
} | |
$post = get_page_by_path($slug); | |
if ($post && $post->post_status === "publish") { | |
$page = get_page_fields($post); | |
// Get recurring fields; | |
foreach($page['fields']['layout_content'] as $key => $value){ | |
if($value['acf_fc_layout'] == 'repeating-block'){ | |
$page['fields']['layout_content'][$key]['layout_content']->fields = get_fields($value['layout_content']->ID); | |
} | |
} | |
} else { | |
$page404 = get_page_by_path('404-page'); | |
if ($page404->ID) { | |
$page = get_page_fields($page404); | |
} else { | |
$page['type'] = '404'; | |
} | |
} | |
return $page; | |
} | |
function get_page_fields($post) | |
{ | |
$page = array(); | |
if ($post) { | |
$page['id'] = $post->ID; | |
$page['title'] = $post->post_title; | |
$page['name'] = $post->post_name; | |
$page['content'] = wpautop($post->post_content); | |
$page['excerpt'] = wpautop($post->post_excerpt); | |
$page['date'] = $post->post_date; | |
$page['date_modified'] = $post->post_modified; | |
$page['title'] = $post->post_title; | |
$page['status'] = $post->post_status; | |
$page['categories'] = get_pages_categories($post->ID); | |
$page['tags'] = get_pages_tags($post->ID); | |
$page['fields'] = get_fields($post->ID); | |
$page['featured_image'] = get_the_post_thumbnail_url($post->ID); | |
} | |
return $page; | |
} | |
add_action('rest_api_init', function () { | |
register_rest_route('pages', '/all', array( | |
'methods' => 'GET', | |
'callback' => 'get_pages_all', | |
)); | |
register_rest_route('pages', '/page', array( | |
'methods' => 'GET', | |
'callback' => 'get_page_by_slug' | |
)); | |
register_rest_route('pages', '/tag', array( | |
'methods' => 'GET', | |
'callback' => 'get_post_by_slug', | |
)); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment