[主機]bluehost更換php version

1. Log in to your Bluehost account.
2. Under Programming click PHP Config.
3. Select the version of PHP you're interested in using.
4. Click Save Change

[woocommerce]woocommerce 3.0 product image gallery

woocommerce 3.0升級上去後，在product image gallery這邊有了非常大的變化。

2.6以前在"設定"->"商品"選項裡可以選擇的燈箱效果拿掉了，
導致商品頁的lightbox等效果通通失效。

主要是因為3.0後，woocommerce採取更多樣化的選擇提供給使用者去選擇更多的功能。

詳細資訊可看
https://woocommerce.com/2017/04/woocommerce-3-0-release/

目前解決方式如下

在主題的function.php裡面增加下列程式碼

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

回到前台商品頁
功能有出來了但是css的部分能然要設定一下

/* WooCommerce 3.0 Gallery */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

參考資料
https://createandcode.com/broken-photo-gallery-and-lightbox-after-woocommerce-3-0-upgrade/

[Wordpress]解決Allowed memory size of XXXXXX bytes exhausted

Wordpress在安裝許多外掛之後，突然發現admin_ajax.php發生錯誤，
經過找尋原因後發現是Allowed memory size of XXXXXX bytes exhausted的問題，
由於主機是國外租用的無法修改php.ini檔，
故在wp-config.php這隻檔案加上
ini_set('memory_limit', '256M');
這段語法即可。

[wordpress]woocommerce貨號問題

舊版的woocommerce貨號會另外有張wp_ps_product_sku來存放
新版的woocommerce貨號會存放在wp_postmeta

要搜尋相關貨號如下

SELECT * FROM `wp_postmeta` WHERE `meta_value` = '要查詢的貨號'

[wordpress]連結google calendar api的小外掛

1.先註冊成為google api 使用者(網路上教學很多，不多敘述)
2.先前往https://developers.google.com/google-apps/calendar/overview?hl=zh-TW參考php的Quickstart
3.承上，會使用Composer下載相關google calendar api的程式碼(注1.)
4.進入要設定分享的日曆進入日曆設定>>共用此日曆新增第1步所註冊的google api使用者
5.

建立一組API金鑰

6.
<?php
ini_set("display_errors", "On");
error_reporting(E_ALL & ~E_NOTICE);
require_once __DIR__ . '/vendor/autoload.php';//步驟3所下載的google calendar api
define('APPLICATION_NAME', 'Google Calendar API PHP Function');
define('SCOPES', implode(' ', array(Google_Service_Calendar::CALENDAR_READONLY)));

function getClient() {
$client = new Google_Client();
$client->setApplicationName(APPLICATION_NAME);
$client->setScopes(SCOPES);
$client->setDeveloperKey('XXXXXXXXX');//步驟5所建立的金鑰
$client->setAccessType('online');

return $client;
}

$client = getClient();
$service = new Google_Service_Calendar($client);
$calendarId = 'XXXXXX@group.calendar.google.com';//步驟4所要共用的日曆ID
$optParams = array(
'orderBy' => 'startTime',
'singleEvents' => TRUE,
);
$calEvents = $service->events->listEvents($calendarId, $optParams)->getItems();
?>
以上程式碼是簡易的抓取日曆上的資料
注1:Composer用法請參考[xampp]安裝laravel這篇文章

[wordpress]Fix the HTTP Error When Upload Images to WordPress

在theme's function.php新增以下code

add_filter( 'wp_image_editors', 'change_graphic_lib' );

function change_graphic_lib($array) {

  return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );

}

[wordpress]主題臉書分享按鈕

目前手上的兩個主題臉書分享按鈕都出現問題
共同點都是使用https://www.facebook.com/sharer.php這個方式去分享

查了原因後發現臉書似乎已經不建議使用這個方式去分享

但是為了不大幅修改主題的情況下，
把image這個停用的功能拿掉即可

在主題底下搜尋sharer.php這個關鍵字即可找到

[wordpress]woocommerce自訂結帳欄位順序

function custom_override_checkout( $fields ) {
// billing address
$fields['billing']['billing_first_name']['class'] = array('form-row-last');
$fields['billing']['billing_last_name']['class'] = array('form-row-first');
$fields['billing']['billing_phone']['class'] = array('form-row-first');
$fields['billing']['billing_email']['class'] = array('form-row-wide');




// billing address order
$billing_order = array(
"billing_country",
"billing_last_name",
"billing_first_name",
"billing_company",
"billing_address_1",
"billing_address_2",
"billing_city",
"billing_state",
"billing_postcode",
"billing_email",
"billing_phone"
);


foreach($billing_order as $field)
{
$billing_ordered_fields[$field] = $fields["billing"][$field];
}

$fields["billing"] = $billing_ordered_fields;

return $fields;
}

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout' );

[wordpress]woocommerce購物車商品類型中文顯示亂碼

將plugins\woocommerce\templates\cart\cart-item-data.php

<dd class="variation-<?php echo sanitize_html_class( $data['key'] ); ?>"><?php echo wp_kses_post( wpautop( $data['display'] ) ); ?></dd>

改成以下

<dd class="variation-<?php echo sanitize_html_class( $data['key'] ); ?>"><?php echo wp_kses_post( wpautop( urldecode($data['display']) ) ); ?></dd>


再放入主題的woocommerce\cart\下面即可

[wordpress]在function.php增加shortcode

以下範例為列出post的title加連結並寫成shortcode


<?php
function get_posts_function($atts){
$return_string = '<div>';
query_posts(array('orderby' => 'date', 'order' => 'DESC', 'category__and' => $atts ));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .= '<div class="pro_title"><a href="'.get_permalink().'">'.get_the_title().'</a></div>';
endwhile;
endif;
$return_string .= '</div>';
wp_reset_query();
return $return_string;
}
add_shortcode('get-posts', 'get_posts_function');
//建立一個短代碼
function register_shortcodes(){
add_shortcode('get-posts', 'get_posts_function');
}
//新增至佈景主題中
add_action('init', 'register_shortcodes');/*文章頁面*/
add_filter('widget_text', 'do_shortcode'); /*小工具*/
?>

在文章內頁插入
[get-posts cat1=5 cat2=15]
註: cat1 cat2為category__and參數，可增加數個不等。

[wordpress][visual composer]post grid 客製查詢條件

cat=1

當要下分類and時

category__and[0]=15&category__and[1]=5

別忘了encoded 如下

category__and%5B20%5D=15&category__and%5B21%5D=5

20160512更新
分類5and15，依照日期降冪排列，排除前3筆文章

category__and%5B20%5D=5&category__and%5B21%5D=12&orderby=date&order=DESC&offset=3&posts_per_page=3

參考網頁:

https://www.design33.net/how-to-visual-composers-grid-custom-query/

[xampp]本地端更新wordpress 外掛時出現輸入ftp的解決方式

在wp-config.php
輸入以下:
define("FS_METHOD", "direct");define("FS_CHMOD_DIR", 0777);define("FS_CHMOD_FILE", 0777);

[wordpress]利用程式自動新增文章並預設特色圖片

本段程式是自己改寫於新增portfolio文章與新增post文章有點不同

function auto_post(){
$postData = array(
'post_title'    => 'My portfolio post',
'post_content'  => '',
'post_type'      => 'dt_portfolio', // Default 'post',預設值是post
'post_status'   => 'publish',
'post_author'   => 1
);
  // 新增文章並取得post_id
$post_id = wp_insert_post( $postData );
             
  $getImageFile =  ABSPATH . 'wp-content/uploads/2015/11/4A7C3296.jpg';// 圖片來源
$wp_filetype = wp_check_filetype( $getImageFile, null );

$attachment_data = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => sanitize_file_name( $getImageFile ),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment( $attachment_data, $getImageFile, $post_id );
  require_once( ABSPATH . 'wp-admin/includes/image.php' );
  $attach_data = wp_generate_attachment_metadata( $attach_id, $getImageFile );
  wp_update_attachment_metadata( $attach_id, $attach_data );
  // 設定特色圖片縮圖
  set_post_thumbnail( $post_id, $attach_id );
   // 設定portfolio分類(註)
wp_set_post_terms($post_id, 22, 'dt_portfolio_category');
}



註:假如是文章的話不需在此設定分類，$postData那邊加入以下程式'post_category' => array( $Category ),即可，因為筆者要新增的是portfolio分類所以無法使用該方法，故用wp_set_post_terms()來修改該筆post分類。

[wordpress]visual composer post_grid使用自訂查詢資料來源

Custom query 欄位下

post_type='post分類名稱'&order=ASC

例:
post_type=dt_portfolio&order=ASC

[wordpress]woocommerce後台購買日期變成"年/月/日"解決方法

woocommerce後台購買日期變成"年/月/日"是因為語系語翻譯錯誤所造成，可以用poedit去編輯語系檔案，找到"年/月/日"把它改成"y/m/d"再儲存就可以。

檔案路徑:\htdocs\wp-content\languages\plugins\woocommerce-admin-zh_TW.po

註:這是woocommerce官方釋出的翻譯檔就已經出錯，所以此方法在官方未更新翻譯檔的情況下只能治標不能治本。翻譯覆蓋後請記得再去修改。

[wordpress]在子主題新增jQuery plugin

參考官方建議使用wp_enqueue_script()用來載入 javascript 檔，wp_enqueue_style()用來載入css檔，使用方式如下
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_script() 使用說明:

$handle：用於區別 script 名稱(string)；

$src：javascript 檔案位置(string)；

$deps：相關性，指此 javascript 必須在此 javascript 之前載入(array,非必需的)；

$ver：幫 javascript 加註版本，留空白則使用當前 wordpress 版本號碼(string,非必需)；

$in_footer：是否放置到網頁HTML底部載入(boolean,非必需)。

wp_enqueue_style() 使用說明:

$handle：用於區別 CSS 的名稱(string)；

$src：CSS 檔案位置(string)；

$deps：相關性，指此 CSS 必須在此 CSS 之前載入(array,非必需)；

$ver：幫 CSS 加註版本，留空白則使用當前 wordpress 版本號碼(string,非必需)；

$media：用於 CSS 的 media 參數值(string,非必需)。

使用範例:

function add_pluginname_scripts() {

    wp_enqueue_style( 'style', get_stylesheet_uri() );

    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'add_pluginname_scripts' );

注意事項:

1.請將jQuery plugin放置子主題的資料夾內

2.必須寫在function.php這隻檔案。

3.若是在子主題新增的話，$src的部分請改寫成get_stylesheet_directory_uri()←用來取得子主題的url

[Wordpress]trailingslashit用法

<?php trailingslashit( $string ) ?>

在字串末尾添加"/"符號

在添加之前會刪除字串末尾已經有的"/"符號避免發生添加兩個"/"的錯誤
ex.

<?php
           $path = trailingslashit( 'http://mywebsite.com' );
?>

$path輸出
http://mywebsite.com/

[wordpress]Visual Composer 手機板隱藏區塊

將background->single color 手機板時就可以隱藏區塊

[wordpress]取得網站網址

<?php $url = site_url(); ?>
<img src="<?php  echo $url; ?>/wp-content/themes/主題資料夾/images/檔名.png" />

//子主題的url
<?php echo get_stylesheet_directory_uri(); ?>