Я создаю веб-приложение с новой Ionic 4 Framework и несколькими установками WordPress (в поддоменах на одном сервере).
Я хочу использовать установки WordPress с моего поддоменов (то есть: stream.example.com,download.example.com, site.example.com) для использования определенных функций WordPress, таких как отображение аватара пользователя и имени пользователя при входе в систему, или проверка того, вошел ли пользователь в систему и отображает ли членство в контенте, и если пользователь вышел из системы, отобразить альтернативный контент.
Я хотел бы использовать API WordPress для использования определенных функций и отображения или НЕ отображения определенного контента или параметров для пользователей. Я новичок в использовании ионных 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 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>