解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時,常會需要使用jQuery,WordPress其實很貼心的已經載入jQuery,但實際使用時發現,原本可以跑的jQuery程式,放進WordPress卻不能跑了,才知道原來WordPress的jQuery要這樣寫。

 

WordPress 頁面中,確實看到 jQuery 已載入

<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

頁面中加入一段測試碼

<script>
$( document ).ready(function() {
        alert("hello");
});
</script>

理論上應該是會順利看到 hello 對話框,但是沒有

 

解決方法:

主要是jQuery寫法的問題,選擇器不能使用習慣的簡碼 $ 符號,而要用下面這兩種寫法,
順利看到hello 對話框

jQuery( document ).ready( function( $ ) {

    alert("hello");

} );
( function( $ ){

    alert("hello");

} )( jQuery );

本文出自:https://v123.tw

[……]

閱讀更多

jQuery 選擇器,替代萬用字元 模糊查找匹配元素

jQuery 選擇器中沒有所謂的「萬用字元(*)」,可以透過依些方式接近模糊查找元素或值的目的

歸納出幾種用法

下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值[class!=’test’]元素屬性不包含指定的值

使用範例:

Demo Download 範例下載:

[……]

閱讀更多

jQuery 取網址、根目錄

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:
  • window.location.host : you’ll get sub.domain.com:8080 or sub.domain.com:80
  • window.location.hostname : you’ll get sub.domain.com
  • window.location.protocol : you’ll get http:
  • window.location.port : you’ll get 8080 or 80
  • window.location.origin : you’ll get http://sub.domain.com *
Update: about the .origin
* As the ref states, browser compatibility for window.location.origin is not clear. I’ve checked it in chrome and it returned http://sub.domain.com:port.
出處
http://stackoverflow.com/questions/1368264/get-host-name-in-javascript

[……]

閱讀更多

jQuery javascript關閉 fancybox視窗

由fancybox視窗中關閉:

<a href="javascript:parent.$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	parent.$.fancybox.close();
})
</script>

由主頁上關閉fancybox視窗:

<a href="$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	$.fancybox.close();
})
</script>

 [……]

閱讀更多

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html:

<a href="#">沒有作用</a>

jQuery

/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
    $('a').click(function(e){
	e.preventDefault();
    });
});

 [……]

閱讀更多

CKEditor4 自動清除內容標籤問題的解決方法

CKEditor4 自動清除內容標籤

在CKEditor中我們經由配置檔Config.js,可以依照自己的需求去自定編輯器的工具
如下圖的每一個小方塊,可依需求增加減少:

但在 CKEditor 中 CKEDITOR.editor.filter 會過濾掉一些沒開放功能的內容或程式碼

舉例來說:

上面這編輯器並沒有開放 iframe 這功能,但倘若我想要貼上 youtube 分享的嵌入HTML碼,而 youtube 的 HTML 就是由 <iframe> 方式嵌入的,youtube嵌入的Code如下:

<iframe width="560" height="315" src="//www.youtube.com/embed/9ATcxIOeDiY" frameborder="0" allowfullscreen></iframe>

我們開啟原始碼的編輯模式,貼上這一段code,做嵌入影片的動作後,在切換回所見即所得編輯方式的同時CKEDITOR.editor.filter就會過濾掉一些沒開放功能的內容,如上圖沒開放的iframe工具,如此我們因為沒有開放iframe工具就沒有辦法貼入youtube的iframe嵌入碼,其實這很合理,某些時候是一種很棒的限制內容功能,不過有些時候這或許並不是我們想要的,我們可能希望可以在不提供iframe的工具下,僅能用原始碼貼上的方式貼入 youtube 的 iframe。

解決這問題 CKEditor 也提供了2個解決方法:

在 CKEditor 配置檔 Config.js 設定

方法一:

config.allowedContent=true;

把allowedContent設定為true就是吧CKEDITOR.editor.filter這功能關閉,不去過濾任何內容,這方式不只針對 iframe,而是所有不開放功能都不會再被過濾了,雖然很方便,但少了一層的限制或許會擔心安全性的問題,所以我們還有第二種方法可選擇。

方法二:

CKEDITOR.editor.filter仍然運作,但允許開放部份不支援功能

config.allowedContent=false;
config.extraAllowedContent='iframe';

便只允許iframe的操作,若允許的工具有多項就用空格分隔,如下

config.extraAllowedContent='b i iframe';

[……]

閱讀更多

CKEditor4 重要配置設定 config.js (中文)

簡單的介紹一下 CKEditor

CKEditor是一個非常強大的HTML編輯器,舊稱FCKeditor,是一個專門使用在網頁上屬於開放原始碼所見即所得文字編輯器套件,2003年就開始累積很多用戶了,至今已經十年的時間了,我想很多開發人員對CKEditor這名字應該不陌生,CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器,該有的功能全都有,也提供非常多的配置及API可以符合各種不同的開發需求,而且最重要的是免費的^^,除此之外官網上也提供了非常多相關的使用範例,還有非常詳細的開發文件可讓開發者更了解使用方式,但此篇文章主要不是介紹CKEditor,而是介紹CKEditor的基本配置Config檔的設定。

CKEditor4的設定有些地方好像跟之前板本不太一樣,那本文介紹的CKEditor4的這個版本,所以測試環境請以CKEditor4為準,CKEditor4可至官網下載,也可由下方連結下載。

CKEditor 相關資源

CKEditor 官方網站
http://ckeditor.com/

CKEditor 下載
http://ckeditor.com/download

CKEditor DEMO
http://ckeditor.com/demo

CKEditor 開發文件
http://docs.ckeditor.com/

CKEditor 開發文件 > config
http://docs.ckeditor.com/#!/api/CKEDITOR.config

重要配置說明如下,主要分為工具列、基本設定、選單設定三大部份~

工具列配置:

config.toolbar_Basic =
[
&nbsp;[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
&nbsp;[ 'FontSize', 'TextColor', 'BGColor' ],
&nbsp;'/',
&nbsp;['ShowBlock','Source']
]; 

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

基本設定:

//尺寸設定
config.width=680;
config.height=150;

//重做(上一步)次數
config.undoStackSize = 50;

//介面的語系 Defaults to: '' ; 留空字串的話會字動抓使用者本地端語言(繁中為zh-tw)
config.language = '';

//設定內容語系 Defaults to: 與編輯器語言一樣
config.contentsLanguage = '';

// UI 底色
config.uiColor = '#CCCCCC'; 

//設true CKEDITOR.editor.filter 失去作用 (註二)
config.allowedContent=true;

//allowedContent為false特別允許某些未開啟功能的標籤&nbsp;(註二)
config.extraAllowedContent='iframe';

//工具列可折疊 Defaults to: false
config.toolbarCanCollapse = false;

// CKEditor的主題更換
config.skin = 'moono';

//文字區塊可否拖曳放大縮小 Defaults to: true
config.resize_enabled = false; &nbsp; 
config.resize_minWidth = 500;
config.resize_maxWidth = 750;
config.resize_minHeight = 600;
config.resize_maxHeight = 600;

// 預設字體 - 詳見最下方(註一)
config.font_defaultLabel = 'Arial';

// 預設字體尺寸 - 詳見最下方(註一)
config.fontSize_defaultLabel = '12px'; 

// 載入時內容預設是所見即所得或是原始碼模式
// wysiwyg 所見即所得
// source 原始碼
// Defaults to: 'wysiwyg'
config.startupMode = 'wysiwyg';

//唯讀 Defaults to: false
config.readOnly = false;

//載入時要不要Focus Defaults to: false
config.startupFocus = false; 

// 使用Shift+ Enter組合鍵的行為。
// CKEDITOR.ENTER_P &nbsp; = <p>;
// CKEDITOR.ENTER_BR &nbsp;= <br/>
// CKEDITOR.ENTER_DIV = <div>
// Defaults to: CKEDITOR.ENTER_BR
config.shiftEnterMode = CKEDITOR.ENTER_BR; 

// 使用ENTER鍵產生的標籤
// 使用Shift+ Enter組合鍵的行為。
// CKEDITOR.ENTER_P &nbsp; = <p>;
// CKEDITOR.ENTER_BR &nbsp;= <br/>
// CKEDITOR.ENTER_DIV = <div>
// Defaults to: CKEDITOR.ENTER_BR
config.enterMode = CKEDITOR.ENTER_BR;

關於WORD文字設定

// 貼上的文字是否要清除所有格式 Defaults to: false
config.forcePasteAsPlainText = false;

//從Word貼上時要不要提示「需清理內容為純文字」的對話框。 Defaults to: false
config.pasteFromWordPromptCleanup = false;

//是否忽略所有的字體相關的格式化風格,包括:字體大小、字型、字體顏色、字體背景色
//Defaults to: true
config.pasteFromWordRemoveFontStyles = false;

//是否刪除不能管理編輯器中的元素的樣式。請注意,這並不處理特定字體的風格,這取決於設置而不是pasteFromWordRemoveFontStyles。 Defaults to: true
config.pasteFromWordRemoveStyles = false;

設定選單:

// 字體大小選單 (名稱/字體大小)
CKEDITOR.config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';

// 字型選單 (名稱/字體)
CKEDITOR.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
'Comic Sans MS/Comic Sans MS, cursive;' +
'Courier New/Courier New, Courier, monospace;' +
'Georgia/Georgia, serif;' +
'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
'Verdana/Verdana, Geneva, sans-serif';

// 設定表情符號icon
config.smiley_descriptions = ['smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise', 'indecision', 'angry'[......]

閱讀更多