黎顛雲 這是黎顛雲的部落格!
搭配 AAPL,讓你的 WordPress AJAX化! 2017/6/10 沒有人留言

事情是這樣的,我前幾天架好了WordPress很開心,在頁面裡放了一個 Fullwidth 的音樂播放器

是的,就是你們看到的這個(?

但是我發現,在載入 blog 內不同內容時 (頁面跳轉) 播放器都會重置…

其實腦內的第一個想法不是AJAX,而是在頁面上分兩塊 iframe (欸

之後發現 WordPress 居然有如此好用的外掛,太令人感動了。

以下正文開始

首先在 WordPress 安裝 AAPL 並啟用

如果這時候你發現你的網站已經成功 AJAX 化,恭喜你,你的佈景主題原生支援,你很幸運。

不過我的就沒有…只好自力救濟啦!

以我目前使用的佈景主題 Carter 為例 (已經送 PR 讓他原生支援 AAPL 囉!)

index.php中我們可以看到

PHP

<?php get_header(); ?>

<div class="ts narrow container" style="padding-top: 20px;"><div class="ts stackable grid">
<div class="twelve wide column">
<!-- Blog Post -->
<div class="ts two stackable waterfall cards">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="ts card">

我們要尋找的是<?php if (have_posts()) : while (have_posts()) : the_post(); ?>以上的<div>東東

也就是ts narrow container ts stackable gridtwelve wide column

在這個例子裡,很明顯我們要修改的是ts narrow container

於是我們修改成


<?php get_header(); ?>

<div id="content" class="ts narrow container" style="padding-top: 20px;"><div class="ts stackable grid">
<div class="twelve wide column">
<!-- Blog Post -->
<div class="ts two stackable waterfall cards">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="ts card">

page.phpsingle.php裡也如法炮製

就完成啦!

此時可以去檢查看看你的網站是否已成功AJAX化。

音樂播放不會中斷啦owo//


更新:開了AAPL之後,文章內的JS會被忽略,需要原先調用再回調,太麻煩了qwq

先關掉,等之後真的原生寫一個AJAXified的theme吧ˊˋ

分享
分享給你所有的朋友

留下留言
來插頭香吧!成為第一個留言的🌚👏👏

請不要填寫真實姓名
這不會公開
選填
留下留言