skyroxas1521

什麼是 Microdata： Microdata 為 HTML5 的一部分，至於 Microdata 等標籤的作用 簡單來說： 我們一般用來顯示資料的 HTML 等標籤是給我們 人 看的 ， 而 Microdata 等標籤則相反，是專門為 機器 等各大搜尋引擎觀看而設計的 官方實例： <div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction&

前言： 現今要使用 JavaScript 實現 剪貼簿複製文字 非常的容易 網頁編輯器 有提供 JavaScript 的 API document.execCommand() ， 可以輕易的讓我們進行 文字編輯器 的操作，其中也包含了 剪貼簿複製文字 的操作 > 參考連結： MDN Document.execCommand() [https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand] 實例： 以下為範例： Code : <div> <input id ="copyInput" value ="文字1"

功能論述： 「使用者瀏覽紀錄」功能，可以幫助 使用者 快速的找到曾經閱讀過的文章，對於 更新速度快 與有著 大量文章篇幅 的 網站 與 應用 當中，在使用者體驗上有著十分出眾且直接的幫助 開發方向： 已開發者的角度而言，我們要先做的事如下: * 使用者 點擊過的文章 存入到 瀏覽器的 cookie 中 * 再將 存入 cookie 裡的文章，Query 到我們的頁面之中 以上兩點是主要方向 開發紀錄： > 以 JavaScript 前端的方式進行實作 取得當前 文章 的 ID : 當使用者在進入文章內頁時，取得 文章 的 ID ， 將此 ID 作為變數傳給 JavaScript

情境： 為了可以用 陣列(Array) 的方法對 JSON 的物件進行操作，我們必須先把 JSON 物件，轉換為 陣列(Array) 說明： 拿下面 JSON object 為例： var jsonObj = {"0":"1","1":"2","2":"3","3":"4"}; 如果我想取得這 Object 的 length: console.log(

pointer-events pointer-events 為控制滑鼠目標的 CSS3 屬性 > The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events. 雖說大部分為製作 SVG 時使用，不過在特定情況時在 div 上使用也是可以的 製作穿透的 div 穿透的 div 這需求非常常見，例如：連結上著遮罩，或是製作選單在展開前把選單藏在畫面上，都是用的到的 使用 pointer-events 很容易就可以達到我們想要的效果 pointer-events:auto auto 為 pointer-events

情境： 相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生，近期在開發 jQuery Plugin 時 ， 碰到一個問題 ， 我需要在 resize 事件發生時 ， 針對 視窗的 放大 與 縮小 ， 執行不同的 method 與 event 這類的需求，其實是非常常見的，像是 scroll 事件中，只針對滾輪在 往上 滾動時，讓隱藏的選單出現於畫面中，就是我們在使用網頁的使用者體驗中，最常見的例子 作法 ： > 此部份我以 resize 事件為範例， 同邏輯 scroll 事件也適用下列方法 範例： (function($){ var previousDimensions = { width: $(window)

情境 ： 分類列表 在 Web 中非常的常見，而 WordPress 在針對 分類列表 處理上 ， 提供了一個方法叫做 wp_list_categories（） [https://developer.wordpress.org/reference/functions/wp_list_categories/] ， 這也是我在 WordPress 中第一次製作 分類列表 Google 關鍵字 wordpress categories list ，第一筆就找到的， wp_list_categories（） [https://developer.wordpress.org/reference/functions/wp_list_categories/] 這個方法在使用上十分的容易，也提了許多的屬性 （例如：層級、排序、

前言： 如標題，在做任何應用的開發，對工程師而言這種需求並不少見，而在 WordPress 開發中，更是常見，因為很多 WordPress 的 Variable 與 Method ， 都是經 php 開發後所提供 情境： 最典型的例子就是 get_template_directory_uri( ) [https://developer.wordpress.org/reference/functions/get_template_directory_uri/] 了 ： 這是 WordPress 用來回傳 版型根目錄 所提供的 Method，在 JavaScript 的開發中，尤其是在 Ajax 的應用，往往都會需要 檔案目錄的路徑 來協助提取我們要的資料 那如何將

前言 ： 如果你是有一般 Html 跟 JavaScript 基礎你應該都知道，我們在 Html 上開發 JavaScript 時之前 ， 除了直接在 script 標籤裡直接開發外，就直接用以下方式引入 JavaScript 的檔案： <script src="myscripts.js"></script> 雖然使用這種方法在 WordPress 中也是行得通，不過你可能會碰到以下的問題： * 檔案路徑的問題 * 因為 header.php 與 footer.php 重複使用 ， 導致 js 在不必要時候載入 使用 WordPress 內建方法 ： WordPress 本身就有提供 引入 JavaScript

目的： * 優化 jQuery scroll 與 resize 的事件觸發 * 大幅減少重複的代碼，達到效能優化 > 參考文章：delay-scroll-handlers-javascript [https://dannyvankooten.com/delay-scroll-handlers-javascript/] 底下文章皆以 scroll 事件為例： 情境： 我們在開發互動式網站時，通常 scroll 事件都是少不了的，現在很多 UI 的設計都會對 滾動 這個事件進行客制化，畢竟他是使用者與網站最主要的互動。 在程式端，如果你使用是 jQuery 一定都是使用 .scroll() [https://api.jquery.com/scroll/]，來進行事件驅動，如下： $(window).scroll(function(){ console.log('scroll event&

目的： 使用jQuery在 WordPress 中實做ajax無限捲軸 參考文章：getting-loopy-ajax-powered-loops-with-jquery-and-wordpress–wp [https://code.tutsplus.com/articles/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress--wp-23232] 一、前製準備： * 在網站版型目錄下新增一個 .php 的 file （此以 loopHandler.php 為此 php 檔案做命名） * 在網站版型目錄下新增一個 js 目錄以存放所需的 js 檔案 * 於 剛新增的 js 目錄下新增一個 .js 的 file （此以 ajaxLoop.js 為此 js 檔案做命名） > 在 WordPress 中引入 javascript 檔案 需要在