分類
Wordpress

WordPress的網站縮圖API-mShots

這個是依附在 akismet 下的透過網址可以成生網站的縮圖, API的語法如下:

https://s0.wp.com/mshots/v1/https%3A%2F%2Fdiary.tw%2F?w=800

其中有兩個部分, API為: https://s0.wp.com/mshots/v1/ 後面直接加上 urlencode 後的網址, 另外有個參數是 w 為指定寬度.

以上面的網址來看, 就是本站的首頁 https://diary.tw/ , 而 urlencode 後就是 https%3A%2F%2Fdiary.tw%2F , 並加上 ?w=800 來產出圖檔囉.

像是

這個專案的 GitHub 連結: https://github.com/Automattic/mShots/

PS: 在 WordPress後台留言管理介面會用到這組 API, 若要停用可以參考這篇: https://wordpress.org/support/topic/how-to-disable-mshots-service/

繼續閱讀:

https://shkspr.mobi/blog/2018/12/using-the-wordpress-mshots-screenshot-api/

分類
Wordpress

快速學習WordPress Child Theme製作方式

在 WordPress 中, 佈景主題 (Theme) 是很重要的功能之一, 不過往往因為需要自訂一些特殊功能或介面, 需要調整 Theme 的檔案.

一旦更新了 Theme, 又會將原本自行調整的功能覆寫掉, 如何能解決這個問題? 可以使用子佈景主題功能.

先來看看官方資料:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

我們可以自建一個子佈景主題來達成這樣的應用需求, 簡易步驟說明如下:

  1. 在 wp-content/themes/ 建立一個目錄, 以 twentyfifteen 佈景主題為例, 我們就建一個 twentyfifteen-child 這個目錄.
  2. 在這個子佈景主題目錄下建立兩個檔案:
    1. style.css 內容用註解的方式, 但需要有以下兩項屬性, Theme Name 與 Template, 例如:
      /*
      Theme Name: Twentyfifteen Child
      Template: tweentyfifteen
      */
    2. functions.php 內容需要加入引用原始 style.css 功能, 如下:
      <?php
      add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
      function enqueue_parent_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
      }
      ?>
  3. 其他若是有需要調整的程式碼, 以複製同檔名方式放在這個子佈景主題裡, 例如 header.php, 把原始 header.php 複製一份到子佈景主題, 再依自己客製求修改調整即可.

接下來只需要到管理介面啟用這個子佈景主題即可, 而未來的主佈景主題更新也不會影響這個子佈景主題, 但若是 header.php 有一定幅度的更新時, 自行修改的部分, 也是需要留意與主佈景主題的相容性狀況.

另外也請參考 hubspot 的這篇:

https://blog.hubspot.com/website/wordpress-create-child-theme

 

 

分類
Wordpress

可抛棄的wordpress測試實驗環境

之前介紹過兩個免費代管 wordpress的服務:

不過若要更快速地測試與實驗 wordpress 還有這些選擇(短時間lab應用):

這兩個建立一個 wordpress 站台的速度都超快, 幾10秒的時間就完成了, 然後要測試什麼 plugin 或是 theme, 都可以很快地來達成, 不過若是想要更 geeker 一點, 可以利用 play-with-docker 來玩.

這些工具都是 wordpress 開發測試時期的好幫手.

[2023/5/12 13:31]

還有一個官方快速的 playground 環境: https://playground.wordpress.net/ 也可以用來測試與驗證 wordpress 功能哦!

 

分類
Wordpress

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:

分類
Wordpress

使用Enlighter於TwentyTwenty Theme的對齊問題

使用 Enlighter 用來做在 WordPress 中顯示程式碼的高亮語法十分方便好用. 不過在 TwentyTwenty Theme 中, 會靠到最左側, 導致閱讀不順利, 檢查一下是 css margin 的問題.

不過在 Enlighter plugin 有回報與解法:

https://github.com/EnlighterJS/documentation/blob/master/wordpress/WPThemeCompatibility.md

只需要自訂 css 中增加:

.enlighter-default{
    margin: 0 auto 1.25em auto;
}

就可以了!

PS. 若在 multi-site環境下的 wordpress , 另外需要這個 plugin 來達成 custom css (附加css) 的功能: https://wordpress.org/plugins/multisite-custom-css/

分類
Wordpress

DemosWP好用免費線上wordpress測試與展示服務

之前介紹過 cloudaccess 的免費代管 wordpress 與 joomla:

https://diary.tw/archives/71

這次看到的服務商是這家:

https://demoswp.com/

目前只有提供 wordpress 功能, 對於建立 demo 與測試十分夠用, 而且有 https 與 ftp / mysql 管理等, 十分適合建立與學習測試 wordpress 的地方.

使用方便很容易, 註冊後, 即可於後台建立網站:

十分方便好用, 需要的朋友們可以試看看.

繼續閱讀:
https://free.com.tw/demoswp/

[2022/5/24] demoswp已停止服務了, 若需要相關類似服務, 請參考這篇: https://diary.tw/archives/1920