Blog: 2016

2016年12月29日星期四

[site5]自訂php.ini

1.在 File Manager>public_html目錄下新增存.user.ini文件
2.用ftp下載下來後修改內容
3.在空白文件輸入memory_limit = 128M等等指令後儲存檔案
4.上傳回public_html目錄下
即可修改php.ini的內容

參考網址
https://kb.site5.com/php/how-to-make-custom-php-changes-using-a-user-ini-file/

2016年12月6日星期二

[photoshop]複製圖層到新檔

變成複製圖案的大小

影像->修剪->確定

2016年9月6日星期二

[css]英文字強制換行

word-break: break-all;

2016年7月1日星期五

[wordpress]woocommerce貨號問題

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

要搜尋相關貨號如下

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

2016年6月27日星期一

[CSS]calc()介紹

當要將layout切成3等分時，以往的做法通常是針對每個div去下width: 33.3%;來實現

現在可直接下width: calc(100%/3);即可自動切成3等分

另外此方法相當彈性，可加減乘除。

例:
div{
width: calc(100%/3-5px);
}
以上div寬度變成33.3%在減5px

最後補充，不僅可以使用在width上面，padding、margin亦可使用。
例:
div{
width: calc(100%/3-5px);
margin-left: calc(5px*3/2);
}

[php]西曆轉成民國

<?php
$date = date('Y/m/d');
$date_array = explode("/", $date);
$date_array[0] = $date_array[0] - 1911;
$date_array = $date_array[0] . '/' . $date_array[1] . '/' . $date_array[2];
echo $date_array;
?>

[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這篇文章

2016年6月3日星期五

[javascript]簡單製作浮動視窗置底功能

#warnings {

position: fixed;
bottom: 0;
z-index: 999;

[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' );

}

2016年5月26日星期四

[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' );

2016年5月20日星期五

[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\下面即可

2016年5月18日星期三

[javacript]偵測螢幕scroll bar 滑動

2016年5月11日星期三

[CSS]select html element name

input[name="goButton"] {

/*your css code*/

}

用來隱藏google分析的iframe如下

iframe[name="google_conversion_frame"] {

display: none;

[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參數，可增加數個不等。

2016年5月6日星期五

[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/

2016年3月8日星期二

[CSS]圖片灰階處理

在html部分加上filter屬性

 html {

filter: grayscale(100%);

}

兼容於各瀏覽器

html {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

增加一個svg濾鏡

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="greyscale">

<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/>

</filter>

</svg>



 html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

}

兼容於IE

html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

filter: gray;

}

[javascript]上傳圖片預覽

html部分:

<div>

<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">

<div class="img_size"></div>

<input type="file" name="img_upload" id="img_upload">

</div>

javascript部分:

jQuery(document).ready(function() {

 

  function img_preview(input){

    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function (e) {

        jQuery('.img_preview').attr('src', e.target.result);

        var kb = format_float(e.total / 1024, 2);

        jQuery('.img_size').text("檔案大小：" + kb + " KB");

      }

      reader.readAsDataURL(input.files[0]);

    }

  }

 

  jQuery("body").on("change", "#img_upload", function (){

   img_preview(this);

  });

});

2016年2月24日星期三

[jQuery]計算文字框輸入的字數

HTML部分:
<div>
<textarea id="desc" name="desc"></textarea>
<div class="change">您還剩下「<span id="word"></span>」字，即可進行下一步</div>
<div class="next">滿200個字囉！您可以繼續填寫或進行下一步</div>
</div>

javacript部分:
jQuery(document).ready(function() {
jQuery('#word').text('200');
jQuery('.next').hide();
jQuery('#desc').on("keyup", KeyIn).on("keydown", KeyIn).on("change", KeyIn);
});

function KeyIn(evt) {
var maxLength = 200;

var nowContent = jQuery(this).val();
var nowLehgth = nowContent.length;

if (nowLehgth > maxLength){
jQuery('.change').hide("slow");
jQuery('.next').show("slow");
}
else{
jQuery('.next').hide("slow");
jQuery('.change').show("slow");
jQuery("#word").html(maxLength - nowLehgth);
}
}

2016年2月2日星期二

[xampp]安裝laravel

1.開啟命令提示字元(cmd)
2.選擇到xampp目錄下的php資料夾下載composer
> cd C:\xampp\php

> php -r "readfile('https://getcomposer.org/installer');" | php

3.下載完成後 composer 將被下載在 C:\xampp\php\composer.phar ，通常會習慣將其重新命名為 composer
> rename composer.phar composer
4.測試是否安裝成功
輸入php composer
有出現 composer 版本及指令說明代表安裝成功

5.安裝 Laravel
將 PHP 的目錄加到環境變數 $PATH 裡面
> php composer global require "laravel/installer=~1.1"
6.建立新的 Laravel 專案
> php composer create-project laravel/laravel C:\www\www_laravel --prefer-dist

7.設定 Apache 建立 VirtualHost
在 C:\Windows\System32\drivers\etc\hosts 加上
127.0.0.1 laravel

8.在 Apache 增加 VirtualHost
在 C:\xampp\apache\conf\extra\httpd-vhosts.conf 最後加上

<VirtualHost *>
DocumentRoot "C:\www\www_laravel\public"
ServerName laravel
<Directory "C:\www\www_laravel\public">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

9.重開 Apache 服務

10.開啟瀏覽器輸入http://laravel/

2016年1月4日星期一

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

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

訂閱：文章 (Atom)

Blog

2016年12月29日星期四

[site5]自訂php.ini

2016年12月6日星期二

[photoshop]複製圖層到新檔

2016年9月6日星期二

[css]英文字強制換行

2016年7月1日星期五

[wordpress]woocommerce貨號問題

2016年6月27日星期一

[CSS]calc()介紹

[php]西曆轉成民國

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

2016年6月3日星期五

[javascript]簡單製作浮動視窗置底功能

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

2016年5月26日星期四

[wordpress]主題臉書分享按鈕

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

2016年5月20日星期五

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

2016年5月18日星期三

[javacript]偵測螢幕scroll bar 滑動

2016年5月11日星期三

[CSS]select html element name

[wordpress]在function.php增加shortcode

2016年5月6日星期五

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

2016年3月8日星期二

[CSS]圖片灰階處理

[javascript]上傳圖片預覽

2016年2月24日星期三

[jQuery]計算文字框輸入的字數

2016年2月2日星期二

[xampp]安裝laravel

2016年1月4日星期一

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

[Laravel]環境架設，使用docker + laradock

搜尋此網誌

2016年12月29日 星期四

2016年12月6日 星期二

2016年9月6日 星期二

2016年7月1日 星期五

2016年6月27日 星期一

2016年6月3日 星期五

2016年5月26日 星期四

2016年5月20日 星期五

2016年5月18日 星期三

2016年5月11日 星期三

2016年5月6日 星期五

2016年3月8日 星期二

2016年2月24日 星期三

2016年2月2日 星期二

2016年1月4日 星期一

2016年12月29日星期四

2016年12月6日星期二

2016年9月6日星期二

2016年7月1日星期五

2016年6月27日星期一

2016年6月3日星期五

2016年5月26日星期四

2016年5月20日星期五

2016年5月18日星期三

2016年5月11日星期三

2016年5月6日星期五

2016年3月8日星期二

2016年2月24日星期三

2016年2月2日星期二

2016年1月4日星期一