Select Page
WordPress-簡潔又好用的預約系統-BookingPress

WordPress-簡潔又好用的預約系統-BookingPress

預約系統在各行各業中都會用到,預約醫生、老師時間,預約健身房時間,預約會議室時間,每種需要都不一樣,也很複雜,這邊先推薦一個可以用在預約專業人員時間的預約系統,使用起來,對於他的設定介面我覺得是預約系統中設計得最好的,80%的功能都可以直接使用。

BookingPress 最喜歡的功能如下

  • 設定介面簡潔好用
  • 使用者前端界面好看清楚
  • 可以快速自訂顯示文字,包含中文化
  • 使用者端有精靈,可以協助預定時間
  • 可以預約加上線上付款
  • 預約時間後,可以由後台再去確認
  • 時間可以切分到分鐘

使用 BookingPress 提供預約服務

1.先建立一個分類目錄 Categories

建立分類目錄的目的是用來放服務 Service

2.建立服務

在剛剛建立的分類下,新增服務,服務可以是某一位醫生、老師

3.新增頁面,用來放置預約表單

在頁面中,新增一個區塊並且插入 [bookingpress_form] ,這個區塊未來會是一個精靈,引導使用者去預約

前端的頁面呈現的樣子

4.設定頁面呈現資料的細節

接下來主要去 bookingpress -> customize 中修改顯示的資訊,這邊可以更改成中文,和需要顯示的資訊

5.設定功能細節

在 bookingpress -> setting 中,每一個選項都還蠻重要的,都要進去做些微調,其中 DaysOff 比較難懂一點,一般的預約系統是正向表列,bookingpress 則是負向表列,在這個表中,有選擇的,就會是假日檔,也就是那天就不開放預約,,其他的時間會去跟你的工作時間中比對後在前端顯示給使用者,並且這個設定是全域的,沒法針對單一的服務

延伸閱讀以及下載

bookingpress 官網 https://www.bookingpressplugin.com/

bookingpress plug 下載 https://tw.wordpress.org/plugins/bookingpress-appointment-booking/

Woocommerce 點選圖片就可以直接加入購物車或是到結帳頁面

點選商品圖片後的行為網址

客戶常常是想要快速結帳,所以通常希望在商品頁面中,點選圖片就可以直接進入結帳了,這時候在 wordpress woocommerce 中沒有特別好用的 Pugin 可以利用,我的解法是在佈景主題中的 functions.php ,加入下面的程式碼片段,其中add-to-cart=id , id 指的是商品 id , quantity=1,1 是數量。

  • 點選圖片後,會直接到結帳頁面,/checkout/?add-to-cart=’.$product->get_id().’quantity=1
  • 點選圖片後,會直接到購物車,/cart/?add-to-cart=’.$product->get_id().’&quantity=1
  • /?add-to-cart=’.$product->get_id()

functions.php

// woocommerce
// 設定圖片上的商品連結
if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
	/**
	 * Insert the opening anchor tag for products in the loop.
	 */
	function woocommerce_template_loop_product_link_open() {
		global $product;
		
        //原先的設定
		//$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
      
      	// 1.改成直接到結帳頁面中
        $link = '/checkout/?add-to-cart='.$product->get_id().'&quantity=1';
      	
      	// 2.點選圖片直接會到購物車中
      	$link = '/cart/?add-to-cart='.$product->get_id().'&quantity=1';
      
      	// 3.點選圖片後不跳轉,但會加入到購物車中
      	$link = '/?add-to-cart='.$product->get_id();

		echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
	}
}

搜尋商品後,點選產品清單中的圖片直接進入購物車

/wp-content/themes/themename/template-tags.php

修改$permalink = !empty( $args[‘permalink’] ) ? $args[‘permalink’] : ‘/checkout/?add-to-cart=’.$post_id.’quantity=1′;

function et_extra_get_post_thumb( $args = array() ) {
	$default_args = array(
		'post_id'                    => 0,
		'size'                       => '',
		'height'                     => 50,
		'width'                      => 50,
		'title'                      => '',
		'link_wrapped'               => true,
		'permalink'                  => '',
		'a_class'                    => array(),
		'img_class'                  => array(),
		'img_style'                  => '',
		'img_after'                  => '', // Note: this value is not escaped/sanitized, and should be used for internal purposes only, not any user input
		'post_format_thumb_fallback' => false,
		'fallback'                   => '',
		'thumb_src'                  => '',
		'return'                     => 'img',
	);

	$args = wp_parse_args( $args, $default_args );

	$post_id = $args['post_id'] ? $args['post_id'] : get_the_ID();

	// add to cart link
	//$permalink = !empty( $args['permalink'] ) ? $args['permalink'] : get_the_permalink( $post_id );
	$permalink = !empty( $args['permalink'] ) ? $args['permalink'] : '/checkout/?add-to-cart='.$post_id.'quantity=1';
	
	$title = !empty( $args['title'] ) ? $args['title'] : get_the_title( $post_id );

	$width = (int) apply_filters( 'et_extra_post_thumbnail_width', $args['width'] );
	$height = (int) apply_filters( 'et_extra_post_thumbnail_height', $args['height'] );
	$size = !empty( $args['size'] ) ? $args['size'] : array( $width, $height );
	$thumb_src = $args['thumb_src'];
	$img_style = $args['img_style'];

	$thumbnail_id = get_post_thumbnail_id( $post_id );

	if ( !$thumbnail_id && !$args['thumb_src'] ) {
		if ( $args['post_format_thumb_fallback'] ) {
			$post_format = et_get_post_format();
			if ( in_array( $post_format, array( 'video', 'quote', 'link', 'audio', 'map', 'text' ) ) ) {
				$thumb_src = et_get_post_format_thumb( $post_format, 'thumb' );
			} else {
				$thumb_src = et_get_post_format_thumb( 'text', 'thumb' );
			}
		} else if ( !empty( $args['fallback'] ) ) {
			return $args['fallback'];
		} else {
			$thumb_src = et_get_post_format_thumb( 'text', 'icon' );
		}
	}

	if ( $thumbnail_id ) {
		list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( $thumbnail_id, $size );
	}

	if ( 'thumb_src' === $args['return'] ) {
		return $thumb_src;
	}

	$image_output = sprintf(
		'<img src="%1$s" alt="%2$s"%3$s %4$s/>%5$s',
		esc_attr( $thumb_src ),
		esc_attr( $title ),
		( !empty( $args['img_class'] ) ? sprintf( ' class="%s"', esc_attr( implode( ' ', $args['img_class'] ) ) ) : '' ),
		( !empty( $img_style ) ? sprintf( ' style="%s"', esc_attr( $img_style ) ) : '' ),
		$args['img_after']
	);

	if ( $args['link_wrapped'] ) {
		$image_output = sprintf(
			'<a href="%1$s" title="%2$s"%3$s%5$s>
				%4$s
			</a>',
			esc_attr( $permalink ),
			esc_attr( $title ),
			( !empty( $args['a_class'] ) ? sprintf( ' class="%s"', esc_attr( implode( ' ', $args['a_class'] ) ) ) : '' ),
			$image_output,
			( !empty( $img_style ) ? sprintf( ' style="%s"', esc_attr( $img_style ) ) : '' )
		);
	}

	return $image_output;
}
woocommerce checkout page info : I would like to receive exclusive…

woocommerce checkout page info : I would like to receive exclusive…

這次業主發現 woocommerce 在結帳的時候,會多出 I would like to receive exclusive emails with discounts and product information 這各選項讓消費者選擇,最後查找原因是多安裝了一個 Plugin 叫做 MailPoet 3 ,是用來收集名單的,要解決的方法可以去 MailPoet 3 中做設定,或是停用 MailPoet 3,也可以 Loco Translate 幫忙她解決英文轉中文的問題

解決方法

  • 去 MailPoet 3 中做設定
  • 停用 MailPoet 3
  • 用翻譯軟體協助 Plugin 翻譯

採用 Loco Translate 幫忙英翻中

IIS 下的 WordPress 如何移除 index.php 路徑

IIS 下的 WordPress 如何移除 index.php 路徑

很少人使用 IIS 架設 wordpress ,因為文件不好找,例外狀況又多,這次又發現 WordPress 的 Route 規則怪怪的,會在所有路徑中出現 index.php? ,這才意識到之前用 nginx 時候這些規則都早就解決,只要研究如何處理這樣的困境,研究之後得到有三個要點。

  • IIS 需要有 URL rewrite 擴充
  • WordPress 後台要去「設定->永久連結」設定自訂結構
  • WordPress 中的 web.config 需要加入 rewrite rule

先安裝 IIS 的 URL Rewrite
回到 WordPress 的後台設定永久連結
更改 web.config 設定 rewrite rule
	<rewrite>
		<rules>
			<rule name="WordPress: https://yourdomain.com" patternSyntax="Wildcard">
				<match url="*"/>
					<conditions>
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
					</conditions>
				<action type="Rewrite" url="index.php"/>
			</rule></rules>
    </rewrite>

Apache and Nginx 的設定作法

https://www.php.cn/cms/wordpress/459657.html

解決在 IIS 10 的 WordPress 上,上傳圖片但無法顯示的問題

解決在 IIS 10 的 WordPress 上,上傳圖片但無法顯示的問題

通常用 WordPress 的人,多數會選擇在 Linux + nginx or apache + php 的解決方案,在這個架構下,權限控管通常是 www-data 所去主管的,在 IIS 中的權限控管相對複雜許多,但直接對應 Linux 系統的是 IIS_IUSRS,這次新安裝在 IIS 的 WordPress ,發現了上傳圖片,明明有在目錄中出現,但卻無法在網站中顯示,網站直接存取圖片時候,會發生代碼 500 的錯誤,查證後,確定是圖片的權限無法讓 IIS_IUSRS 讀取,直接將目錄的權限開放後即可在網站上看到上傳的檔案。

但詭異的是,再次作圖檔上傳測試的時候,發現相同可以上傳但無法顯示圖片的問題一直出現,但只要改了檔案權限後就可以讀取,最後往前去追溯 php 上傳並且產生圖檔的過程後,發現她會先將檔案上傳到 Windows\Temp 然後再複製到 inetpub\wwwroot\wp-content\uploads ,造成檔案的權限是繼承 Windows\Temp 的權限過來的

路徑在C:\Program Files\PHP\v8.0

問題的源頭要將 C:\Windows\temp 的目錄改成讓 IIS_IUSRS 可以修改即可

當你修改 Windows\temp 下的權限會有很多緊告出現,你還可以透過修改 php.ini ,將暫存目錄移動更好的位置中,設定良好的權限後,一直可以解決此一個問題

想知道我如何替PHP除錯?

Windows 主機的 IIS 讓 WordPress 可以透過檔案系統新增外掛

Windows 主機的 IIS 讓 WordPress 可以透過檔案系統新增外掛

這次解決了一個比較少人碰過的問題,當有人在 Windows Server 上並且使用 IIS Server 裝載 WordPress ,但剛剛裝好的時候,關於外掛或是外觀佈景主題,沒法安裝,會跳出要求你透過FTP安裝外掛。

原因是 web.config 設定的問題,以及權限設定的問題,解決方法如下:

增加 Web.config 設定

/* 直接用檔案下載的方法更新 */
define('FS_METHOD', 'direct');

修改權限讓 PHP 可以建立目錄和檔案

去到 wordpress\wp-content\plugins 和 wordpress\wp-content\theme 把目錄的權限加入 IUSR ,並且打開修改權限,這樣就可以直接在 wordpress 後台直接用檔案更新了