将WordPress功能集成到Ionic 4 web应用程序中
将WordPress功能集成到Ionic 4 web应用程序中
提问于 2019-12-02 02:39:36
我正在使用一个新的ION4框架和多个WordPress安装(在同一服务器上的子域中)构建网络应用程序。
我想从我的子域(即: stream.example.com，download.example.com，site.example.com )使用WordPress安装，以使用WordPress的某些功能，如显示用户头像和登录时的用户名，或者检查用户是否已登录并显示成员内容，如果用户已注销，则显示替代内容。
我想使用WordPress应用程序接口来使用某些功能，并向用户显示或不显示某些内容或选项。我刚开始使用来自bootstrap的ionic 4框架，它看起来很简单。但除了复杂的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 width="80" height="80" 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59128717
复制相关文章
相似问题
腾讯云开发者
