将 WordPress 功能集成到 Ionic 4 Web 应用程序中
Posted
技术标签:
【中文标题】将 WordPress 功能集成到 Ionic 4 Web 应用程序中【英文标题】：Integrating WordPress features into an Ionic 4 web application 【发布时间】：2020-03-26 11:07:45 【问题描述】：我正在使用新的 Ionic 4 框架和多个 WordPress 安装（在同一服务器上的子域中）构建 Web 应用程序。
我想使用来自我的子域（即：stream.example.com、download.example.com、site.example.com）的 WordPress 安装来使用 WordPress 的某些功能，例如显示用户头像和登录时的用户名, 或检查用户是否已登录并显示会员内容，如果用户已注销则显示替代内容。
我想使用 WordPress API 来使用某些功能并向用户显示或不显示某些内容或选项。我是使用来自引导程序的 ionic 4 框架的新手，它看起来很简单。但我不熟悉使用任何 API，但仅使用复杂的 WordPress。这是主要的用户界面编码；你也可以在https://www.cynclabs.com现场查看
<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<script src="https://cynclabs.com/js/stickyaudioplayerjquery.min.js"></script>
<link rel="stylesheet" href="https://cynclabs.com/css/stickyaudioplayerjquery.min.css">
<title>Cync Labs Official </title>
</head>
<body>
<ion-app> <---// Will like the option to show this content to only logged in users//--->
<ion-menu side="start" menu-id="first">
<ion-header>
<ion-toolbar class="cync-toolbar">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-avatar>
<---// the following image will be the registered users wordpress avatar// --->
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-card-header>
<ion-card-subtitle>Welcome Back</ion-card-subtitle>
<ion-card-title>Wordpress User Name Will GO Here</ion-card-title>
</ion-card-header>
<ion-card-content>
Wordpress Membership TItle Will be Here (Displayer specific user membership tier), This Link WIll Go Here for the option to upgrade
</ion-card-content>
</ion-card>
<ion-list>
<ion-item> menu one</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu side="start" menu-id="custom" class="my-custom-menu">
<ion-header>
<ion-toolbar class="cync-toolbar">
<ion-title>Custom Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu side="end" type="push">
<ion-header>
<ion-toolbar class="cync-toolbar">
<ion-title>End Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" main>
<ion-header>
<ion-toolbar class="cync-toolbar">
<ion-title>
<ion-row>
<ion-col size="4">
<div>
<ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
</div>
</ion-col>
<ion-col size="4">
<div>
<center><ion-img onclick="openEnd()" src="https://cynclabs.com/images/logo.png"></ion-img></center>
</div>
</ion-col>
<ion-col size="4">
<div>
<ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
</div>
</ion-col>
</ion-row>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" >
<div id="contentarea">
<---//would like to php load the wordpress page content from the menus in here using ajax/jquery//--->(No IFrame)
</div>
</ion-content>
</div>
</ion-app>
<ion-menu-controller></ion-menu-controller>
<style>.my-custom-menu
--width: 80px;
</style>
<!!-- this menu animation -- >
<script>
const menuCtrl = document.querySelector('ion-menu-controller');
function openFirst()
menuCtrl.enable(true, 'first');
menuCtrl.open('first');
function openEnd()
menuCtrl.open('end');
function openCustom()
menuCtrl.enable(true, 'custom');
menuCtrl.open('custom');
</script>
<style>
.cync-toolbar
--background: rgba(76,185,196,1);
--background: -moz-linear-gradient(45deg, rgba(76,185,196,1) 0%, rgba(61,211,174,1) 100%);
--background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,185,196,1)), color-stop(100%, rgba(61,211,174,1)));
--background: -webkit-linear-gradient(45deg, rgba(76,185,196,1) 0%, rgba(61,211,174,1) 100%);
--background: -o-linear-gradient(45deg, rgba(76,185,196,1) 0%, rgba(61,211,174,1) 100%);
--background: -ms-linear-gradient(45deg, rgba(76,185,196,1) 0%, rgba(61,211,174,1) 100%);
--background: linear-gradient(45deg, rgba(76,185,196,1) 0%, rgba(61,211,174,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cb9c4', endColorstr='#3dd3ae', GradientType=1 );
--color:#ffffff;
.devBox-content
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12) !important;
</style>
</body>
</html>
【问题讨论】：
【参考方案1】：我编写了一个由五部分组成的教程系列，名为使用 Ionic、Angular 和 WordPress REST API 构建 PWA，这可能有助于实现这一目标：
Part 1, Part 2, Part 3, Part 4, Part 5
【讨论】：
以上是关于将 WordPress 功能集成到 Ionic 4 Web 应用程序中的主要内容，如果未能解决你的问题，请参考以下文章
将 Wordpress Post 与 Cakephp3 集成
将 Capacitor 集成到 Ionic 项目后无法在 Xcode 中运行
尝试将 Wordpress 平台集成到另一个 Wordpress 平台时显示错误