WordPress 教学

如何在WordPress页眉菜单中添加按钮

如何在WordPress页眉菜单中添加按钮

你想在WordPress页眉菜单中添加一个按钮吗?通过在主导航菜单中添加一个按钮,你可以让网站的号召性用语脱颖而出,并为你最重要的页面带来更多流量。本文将向你展示如何轻松地在WordPress页眉菜单中添加按钮。

为什么要在WordPress页眉菜单中添加按钮?

WordPress导航菜单通常是简单的文本链接,每个链接看起来都一样,没有什么特别突出的地方。然而,有些链接比其他链接更重要。例如,你可能想添加一个链接到在线订单表单或你的WordPress会员网站的注册页面。默认情况下,这些重要链接看起来和其他页眉菜单链接一样。你可以通过将它们变成按钮,使这些链接更引人注目。这可以为你带来更多的点击和转化。

默认情况下,你可以使用Button模块在WordPress帖子和页面中添加按钮,但不能将其添加到导航菜单中。接下来,让我们看看如何在WordPress页眉菜单中添加按钮。

在WordPress页眉菜单中添加按钮

步骤1:添加链接

首先,你需要添加你想要变成按钮的链接。请访问WordPress仪表盘中的外观»菜单页面,并将链接添加到导航菜单中。有关详细的说明,请参阅我们的指南《如何在WordPress中添加导航菜单》。

步骤2:显示CSS类选项

然后,你需要点击页面顶部的屏幕选项按钮。这会显示一个包含许多新选项的面板。勾选CSS类旁边的复选框。

步骤3:添加CSS类

接下来,展开你想要变成按钮的菜单项。你会看到一个新的CSS类选项,在这里你可以输入一个类名。你可以随意命名CSS类,但在本指南中,我们会使用menu-button

输入名称后,点击保存菜单按钮保存你的更改。现在你已经为菜单项添加了自定义CSS类,你可以使用自定义CSS代码来更改其外观。你可以通过内置的WordPress定制器或使用代码段插件来添加这段代码。

步骤4:使用WPCode添加按钮(推荐)

在WordPress中添加自定义代码的最佳方式是使用WPCode插件。它是最佳的代码片段插件,允许你添加自定义CSS、PHP、HTML等。由于你不会直接编辑主题文件,因此可以避免许多常见的WordPress错误。你还可以更新主题或切换到完全不同的主题而不会丢失自定义代码。如果你想在任何时候删除按钮,只需点击一下即可关闭。

首先,你需要安装并激活免费的WPCode插件。有关更多信息,请参阅我们的分步指南《如何安装WordPress插件》。插件激活后,访问WordPress仪表盘中的代码片段»添加片段页面。

在这里,你会看到所有可以添加到你网站的现成WPCode片段。这些片段包括一个允许你完全禁用评论、上传WordPress通常不支持的文件类型、禁用附件页面等选项。

现在,将鼠标悬停在添加自己的自定义代码(新片段)选项上,并在出现时点击使用片段按钮。

在下一个屏幕上,你需要为代码片段输入一个标题。这只是供你参考,所以你可以随意命名。然后,打开代码类型下拉菜单并选择CSS片段

完成后,你就可以将下面的CSS代码片段粘贴到WPCode编辑器中:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

添加上述代码片段时,请确保将menu-button替换为你的CSS类名称。上述代码片段会创建一个带阴影效果的橙色按钮,如下图所示。

可以自由地调整CSS片段,以查看你可以创建不同的效果。例如,你可以更改背景色、链接文本颜色、添加边框等。

当你对代码满意时,点击非激活开关,使其变为激活,然后点击保存片段按钮。

现在,如果你访问你的WordPress网站,你会看到新的页眉菜单按钮已生效。

使用定制器添加按钮

如果你不想使用插件,可以使用内置的定制器添加代码。只需访问外观»定制,你会在右侧看到你网站的预览以及左栏中的一堆主题设置。开始将代码添加到其他CSS选项。再一次,你可以使用上面的代码片段作为起点。当你对按钮的外观满意时,点击发布以使更改生效。

额外提示:在WordPress页眉中添加点击拨号按钮

如果你有一个小型商业网站,你可能还想在导航菜单中添加一个点击拨号按钮。这样可以使访问者更容易联系你,甚至可以通过提高网站的搜索引擎排名来提升SEO友好度。要添加此按钮,访问外观»菜单页面,并展开右侧的自定义链接选项卡。在这里输入你的VOIP电话号码,并为它添加标签。然后点击添加到菜单按钮。一旦点击拨号按钮被添加到你的导航链接列表中,不要忘记点击保存菜单按钮以保存设置。有关详细说明,请参阅我们的教程《如何在WordPress中添加点击拨号按钮》。希望这篇文章能帮助你了解如何在WordPress页眉菜单中添加按钮。你还可以参考我们的指南《如何使用WordPress创建登陆页面》和《小型企业的最佳电子邮件营销服务》。如果你喜欢这篇文章,请订阅我们的YouTube频道,获取WordPress视频教程。你还可以在Twitter和Facebook上找到我们。

Read More
WordPress 教学

如何在線銷售數碼藝術和圖形(簡單的方法)

為什麼要在線銷售你的數碼藝術和圖形

如果你是藝術家,有很多方法可以在網上銷售你的作品。例如,你可以創建一個按需印刷商店,將你的圖形轉變為品牌商品或高質量印刷品。

然而,越來越多的藝術家選擇將作品作為數碼下載而不是實物產品進行銷售。這些物品可包括圖庫,電子書,可下載的工作表,Canva 模板等。

銷售數碼下載可以節省金錢,因為你不必支付印刷和運輸費用。你也不必擔心實物儲存,用品或管理庫存。所有這些都意味著更大的利潤,花費的時間和精力更少。

應該使用哪個平台來銷售數碼藝術和圖形

首先,你需要選擇一個電子商務平台來銷售你的藝術和圖形作為數碼下載產品。電子商務平台是你用來上傳藝術作品並提供銷售的軟件。

雖然可以更改你的電子商務平台,但這可能會影響你的業務。為了避免這種情況,請務必仔細選擇並選擇專門為銷售數碼下載而設計的平台。所以我們推薦使用 WordPress 和 Easy Digital Downloads。

設置你的 WordPress 網站

在開始建設 WordPress 網站之前,有必要知道有兩種 WordPress 軟件,WordPress.org 和 WordPress.com。由於它具有更多功能和靈活性,我們將使用 WordPress.org,也稱為自託管 WordPress。

要使用 WordPress 開始銷售數碼藝術和圖形,你需要一個域名。這是人們在瀏覽器中輸入的地址以訪問你網站的地址。

你還需要網絡託管和 SSL 證書來安全地在你的 WordPress 網站上接受信用卡支付。

設置電子商務插件

如果你使用 SiteGround,那麼 Easy Digital Downloads 已經預裝。如果你使用的是其他託管提供商,則需要安裝和激活 Easy Digital Downloads 插件。

訪問 Downloads » Settings,輸入你的商店位置。Easy Digital Downloads 會使用你的位置自動填充一些字段並計算銷售稅。

添加支付網關到 WordPress

訪問 Payments 標籤,選擇 Stripe 或 PayPal 標籤並按照指示設置支付網關。設置完成後,選擇默認支付網關,例如 Stripe,然後點擊保存更改。

設置貨幣顯示,選擇 General 標籤,選擇 Currency 鏈接並設置要使用的貨幣。

將你的數碼藝術轉變為可下載產品

創建數碼產品,訪問 Downloads » Add New,輸入產品名稱,描述,設置價格並上傳圖像文件。設置下載圖像,建議使用低分辨率版本或水印以防止盜版。

自定義下載電子郵件

訪問 Downloads » Settings,選擇 Emails 標籤,自定義你品牌的標誌和消息。

測試你的數碼下載

將網站設置為測試模式後,進行測試購買以確認購買流程。完成測試後,取消測試模式以接受訪客付款。

選擇和自定義你的 WordPress 主題

選擇一個合適的 WordPress 主題來控制網站的外觀和感覺。你可以參閱我們的指南以了解如何安裝 WordPress 主題。

推廣你的數碼下載

你可能需要在網站菜單中添加產品頁面或創建銷售頁面來推廣數碼產品。

推廣工具

我們推薦使用一些工具和插件,如 All in One SEO,MonsterInsights,OptinMonster 和 PushEngage 來推動更多流量和轉換率。

常見問題

在哪裡可以賣我的數碼藝術?

有很多平台和數碼市場可以上傳和銷售你的數碼藝術,如 Etsy,Amazon 和 Fine Art America。然而,我們建議創建你自己的網站來獲得全部利潤。

創建數碼藝術網站的成本是多少?

你可以從每月 5 美元的 SiteGround EDD Hosting 開始,並使用免費插件和主題來限制成本。

我也可以銷售實物產品嗎?

可以使用 Easy Digital Downloads 銷售實物產品,並且有 Simple Shipping 附加功能。

Read More
WordPress 教学

如何在WordPress中添加YouTube订阅按钮

为什么在WordPress添加YouTube订阅按钮?

通过YouTube频道可以接触到新观众,提高网站参与度,并增加博客流量。如果您的WordPress博客已有YouTube频道,那么您应该让访客能够轻松订阅您的频道。这就是YouTube订阅按钮的作用。这个按钮可以让访客在几秒钟内订阅您的频道,还可以向那些可能还不知道您有频道的访客推广您的YouTube频道。

方法1:手动添加YouTube订阅按钮代码

在这个方法中,我们将讨论如何使用Google开发者工具创建一个YouTube订阅按钮。然后,您可以使用短代码将此按钮添加到任何小工具、帖子或页面。首先,您需要访问YouTube订阅按钮页面。在这里,您需要在‘频道名称或ID’字段中输入您的YouTube频道名称或ID。

要获取这些信息,您可以打开浏览器中的新标签页然后前往YouTube主页。接着,点击右上角的个人资料图片并选择‘设置’。在左侧菜单中点击‘高级设置’,找到‘频道ID’字段并点击其‘复制’按钮。接下来,返回到YouTube订阅按钮页面并将‘频道ID’详细信息粘贴到‘频道名称或ID’字段中。预览会更新以显示您的YouTube订阅者总数。

然后,您可以选择两种不同的布局来显示您的YouTube订阅按钮,默认布局会显示订阅按钮及订阅者总数,还有一种是‘全布局’,它不仅显示订阅按钮和订阅者数量,还会显示频道的个人资料图片和频道标题。根据需要,您可以选择不同的主题,默认主题是白色背景,但也可以切换到暗模式。可以通过‘主题’下拉菜单看到不同主题效果。

方法2:使用插件添加YouTube订阅条

另一种方法是使用YouTube Subscribe Bar插件。这是一个免费的插件,设置完成后,它会自动在您网站上嵌入的每个YouTube视频上添加一个‘订阅YouTube频道’条。该插件仅适用于oEmbed格式嵌入的YouTube视频。首先,前往视频页面并点击‘分享’按钮,选择‘嵌入’选项并复制嵌入链接。然后,打开要嵌入视频的页面或文章,点击‘+’图标并搜索‘嵌入’,粘贴链接并点击‘嵌入’按钮。

完成这一过程后,安装并激活YouTube Subscribe Bar插件,访问设置页面并输入您的频道ID。设置定制的‘订阅文本’和颜色主题后,保存更改。您现在可以访问嵌入了YouTube视频的页面或文章查看效果。

如何将网站访客转化为YouTube订阅者

在WordPress网站添加YouTube订阅按钮是增加订阅者的好方法,但还有许多其他方法可以鼓励网站访客成为YouTube订阅者。如果您的博客和视频内容主题相似,可以在博客文章中嵌入YouTube视频。如果访客对文章感兴趣,他们很可能也会对相关的YouTube视频感兴趣。

此外,如果您有很多相关视频,可以将它们组织成YouTube播放列表,并将播放列表嵌入到您的网站。这可以引导访客从一个视频看到下一个,保持他们对内容的兴趣。我们希望这篇文章能帮助您了解如何在WordPress中添加YouTube订阅按钮。

Read More
WordPress 教学

如何在WordPress代码编辑器中编辑HTML(初学者指南)

您为什么要在WordPress中编辑HTML?

WordPress提供了数以千计的主题和插件,可让您在不编辑一行代码的情况下更改网站外观和自定义不同的元素。然而,插件和主题存在限制,并且可能无法提供您需要的确切功能。因此,您可能无法根据自己的喜好样式化网站。这时,编辑HTML就非常有用了。您可以通过HTML代码轻松进行高级自定义,提供了更多的灵活性和对网站外观和功能的控制。

同时,学习如何编辑HTML还可以帮助您在无法访问仪表板时识别和修复网站上的错误。

使用WordPress区块编辑器编辑HTML

在WordPress区块编辑器中,有多种方法可以编辑帖子或页面的HTML。首先,您可以在内容中使用“自定义HTML”区块添加HTML代码。

进入WordPress仪表板,然后添加一个新帖子/页面或编辑现有文章。然后,点击左上角的加号(+)并添加“自定义HTML”区块。

接下来,在区块中输入自定义HTML代码。您还可以点击“预览”选项,查看HTML代码是否正常工作以及内容在实时网站上的显示效果。

另一种方法是在区块编辑HTML。选择内容中的现有区块,然后点击三点菜单。接着,选择“编辑为HTML”选项。现在,您将看到单个区块的HTML。编辑内容的HTML,例如添加nofollow链接、更改文本样式或添加其他代码。

如果您想编辑整个帖子的HTML,可以使用WordPress区块编辑器中的“代码编辑器”。通过点击右上角的三点选项并从下拉选项中选择“代码编辑器”,即可访问代码编辑器。

使用WordPress经典编辑器编辑HTML

如果您使用的是WordPress经典编辑器,您可以在“文本”视图中轻松编辑HTML。编辑博客文章或添加新文章时,点击“文本”标签即可查看文章的HTML。

然后,您可以编辑内容的HTML。例如,您可以加粗不同的词语以突出显示、使用斜体样式、创建列表、添加目录等。

在WordPress小工具中编辑HTML

您知道可以在站点的小工具区域添加和编辑HTML代码吗?使用自定义HTML小工具可以帮助您自定义侧边栏、页脚和其他小工具区域。可以嵌入联系表单、行动号召(CTA)按钮、谷歌地图等内容。

进入WordPress管理面板,然后转到外观 » 小工具。点击任何小工具区域上的加号图标,以添加HTML代码。具体的小工具区域取决于您使用的WordPress主题。例如,您可以将其添加到页脚、页眉或其他区域。

接下来,在小工具区块菜单中搜索“自定义HTML”小工具并点击即可自动将其添加到小工具区域。接着,点击您的自定义HTML小工具并输入HTML代码。完成后,不要忘记点击屏幕右上角的“更新”按钮。

现在,您可以访问您的网站查看自定义HTML小工具的实际效果。

使用WordPress主题编辑器编辑HTML

另一种编辑网站HTML的方法是通过WordPress主题编辑器(代码编辑器)。但是,我们不建议您直接在主题编辑器中编辑代码。因为输入代码时的一个小错误可能会破坏您的网站,并且阻止您访问WordPress后台。

此外,如果更新主题,所有更改都会丢失。因此,如果您打算使用主题编辑器编辑HTML,建议在进行任何更改之前备份您的网站。

进入WordPress仪表板,然后转到外观 » 主题编辑器。您将看到有关直接编辑主题文件的警告消息。点击“我明白”按钮后,您将看到主题文件和代码。选择要编辑的文件并进行更改。

使用FTP编辑WordPress中的HTML

另一种替代方法是使用FTP(文件传输协议服务)编辑WordPress主题文件中的HTML。这是所有WordPress托管账户的标准功能。使用FTP而不是代码编辑器的好处在于,您可以使用FTP客户端轻松修复问题。这样,如果在编辑HTML时出错,您不会被锁定在WordPress仪表板之外。

首先,选择一个FTP软件。我们将在本教程中使用FileZilla,因为它是一款适用于Windows、Mac和Linux的免费且用户友好的FTP客户端。选择FTP客户端后,需登录到您网站的FTP服务器。您可以在托管服务提供商的控制面板仪表板中找到登录详细信息。

登录后,您会在“远程站点”列下看到网站的不同文件夹和文件。导航到wp-content » 主题,找到要编辑的主题文件。选择要编辑的主题文件。

右键单击一个主题文件以编辑HTML。例如,如果要在页脚中进行更改,请右键单击footer.php文件。许多FTP客户端允许您查看和编辑文件,并在完成更改后自动上传。在FileZilla中,可以通过点击“查看/编辑”选项进行操作。

建议您在进行任何更改之前将要编辑的文件下载到桌面。编辑HTML后,可以替换原始文件。有关更多详细信息,建议按我们的指南上传WordPress文件。

在WordPress中添加代码的简单方法

在WordPress中添加代码的最简单方法是使用WPCode,这是市场上最好的代码片段插件。该插件由WPressize Me团队设计,即使是完全的初学者也可以在几分钟内将自定义代码添加到他们的网站。此外,该插件的简装版是100%免费使用的。通过WPCode,代码存储在一个地方,帮助组织代码,防止手动编辑代码时可能出现的错误。另一个好处是,您不必担心在更新或更改主题时代码被删除。

首先,需在网站上安装并激活免费版WPCode插件。有关更多详细信息,可以参考我们的详细教程。插件激活后,可以从管理面板导航到代码片段 » 页眉和页脚,然后将HTML代码添加到网站的页眉、正文和页脚框中。

例如,假设您想在网站上显示一个警告栏。将HTML代码输入“正文”框并点击“保存更改”按钮。除了可以在页眉中添加谷歌分析跟踪代码、Facebook像素和抖音广告像素,还可以使用插件在网站页脚中添加Pinterest按钮。

通过WPCode,决定代码输出位置也很容易。例如,可以自动在每个帖子的开头或结尾显示一些HTML代码。

希望这篇文章帮助您学习如何在WordPress代码编辑器中编辑HTML。还可以参考我们的指南了解构建WordPress网站的实际成本,或者查看为何应该使用WordPress的最重要原因。

Read More
WordPress 教学

如何在 WordPress 添加多語言搜尋(2種方法)

你是否想在 WordPress 添加多語言搜尋功能?如果你的 WordPress 網站是多語言的,添加多語言搜尋功能可以讓用戶更快找到信息,提升用戶體驗。在本文中,我們會展示如何輕鬆地在 WordPress 添加多語言搜尋功能,使你的用戶體驗更出色。

為什麼要在 WordPress 添加多語言搜尋?

多數用戶在多語言網站上尋找信息時遇到困難,因為缺乏他們能使用的搜尋功能,或者搜尋結果提供的內容是錯誤語言。添加多語言搜尋功能幫助用戶更容易找到他們需要的內容,改善網站的用戶體驗,延長用戶在網站上的停留時間。

研究顯示,參與度高的用戶更可能轉化,訂閱,或者做出購買決定。事實上,有一項研究發現,76% 的購物者更可能從用他們母語的網站上購買產品。因此,如果你擁有一個面向全球的線上商店,這一功能是必不可少的。添加多語言搜尋提高了不熟悉網站默認語言的用戶的可訪問性,讓他們可以更容易地找到所需內容而不受語言障礙影響。

方法一:使用 TranslatePress 添加多語言搜尋

如果你還沒有制作你的多語言網站或者已經在使用 TranslatePress,那麼這種方法適合你。TranslatePress 是市場上最好的 WordPress 翻譯插件。它通過一個實時編輯器幫助你輕鬆創建多語言網站,簡單快速地翻譯內容。它可以開箱即用,允許默認的 WordPress 搜尋顯示多語言結果。

  • 注意:TranslatePress 免費版只允許你將網站翻譯成另一種語言。如果你想為超過兩種語言添加多語言搜尋,你需要購買 TranslatePress 高級版。

  • 在你的 WordPress 網站上翻譯完內容後,接下來是添加搜尋表單。

向你的 WordPress 網站添加搜尋塊

WordPress 內置了一個搜尋塊,你可以在網站的任意位置添加它。如果你使用的是基於塊的主題,比如 Ultra,你將使用完整站點編輯器來添加搜尋塊。

  • 導航到 WordPress 儀表板的外觀 » 編輯器頁面。這將打開完整站點編輯器,它看起來與你用來編寫文章和頁面的塊編輯器非常相似。

  • 現在,點擊添加塊按鈕 (+),添加搜尋塊。你可以將搜尋塊上下移動,以顯示在頁面上的任意位置。搜尋塊還提供了一些樣式選項,可以從塊工具欄或設置中選擇。

  • 完成後,不要忘記點擊“保存”按鈕以保存更改。現在你可以訪問你的网站,查看搜尋表单是否正在正常运行。

另一方面,如果你使用的不支持完整站点编辑器的主题,你可以将搜尋表单添加为一个小工具。只需轉到 WordPress 管理員儀表中的外觀 » 小工具頁面。點擊添加小工具塊按鈕(+),然後將搜尋塊添加到你的小工具區域。

打開“小工具塊菜單”後,找到“搜尋”塊並將其添加到 WordPress 邊欄。不要忘記點擊頂部的“更新”按鈕以保存更改。保存更改後,訪問網站並查看搜尋框是否正常工作。

方法二:使用 SearchWP 添加多語言搜尋(推薦)

TranslatePress 使用的默認 WordPress 搜尋功能並不是很好。它相當基本,只會在某些地方查找搜尋詞。在這里,SearchWP 派上用場。它是市場上最好的 WordPress 搜尋插件,允許你輕松替換默認的 WordPress 搜尋為功能更強大的搜尋功能。

SearchWP 會自動建立搜尋索引並在內容、標題、分類、標籤、簡碼、文件、產品等中匹配搜索關鍵詞。並且,它會在啟用後自動替換默認的搜尋表單,所以如果你已經在網站上使用了它,無需再次替換。

  • 首先,你需要安裝並啟用 SearchWP 插件。更多信息,請參見我們的指南:如何安裝 WordPress 插件。

  • 接著,前往 SearchWP » 設定頁面,然後點擊“許可證”菜單選項,輸入你的許可證金鑰。你可以從你的 SearchWP 帳戶頁獲取許可證金鑰。複製許可證金鑰並黏貼到“許可證金鑰”欄位,然後點擊啟用按鈕。

創建你的第一個自定義搜尋引擎

前往儀表板的 SearchWP » 設定頁面。從這裡,你會看到 SearchWP 的第一個默認搜尋引擎,已預先配置以適應大多數網站,包括多語言網站。你會看到所有文章類型有不同的屬性,並且每個屬性旁有一個滑動器,你可以用它為該屬性分配權重。

  • 你也可以點擊“添加/刪除屬性”按鈕將更多區域納入搜尋範圍。例如,你可以將自定義欄位和分類法添加到屬性中。

  • 如果你不確定某個設置,可以保持原樣。默認選項適合更多使用情況。

  • 最後,點擊“保存引擎”按鈕保存設置。SearchWP 現在將在後臺開始構建搜尋索引。

向你的 WordPress 網站添加搜尋塊

SearchWP 替換了內置搜索功能,意味著你可以使用默認的 WordPress 搜尋表單,並依然使用 SearchWP 顯示結果。如果你還沒有在網站上添加搜尋表單,這里有如何添加的方法。如果你使用的是基於塊的主題,將使用完整站點編輯器添加搜索塊。

  • 導航到管理員儀表的外觀 » 編輯器頁面。在編輯器页面,点击顶部的添加块按钮 (+) 并添加搜索块。你可以上下移动搜索块以在你想展示搜索表单的地方它。

  • 最后,不要忘记点击“保存”按钮保存更改。如果你使用的是不支持完整站点编辑器的主题,你需要将搜索小工具添加到网站的侧边栏或支持小工具的区域。

  • 為此,導航到儀表板的外觀 » 小工具頁面。点擊頂部的添加塊按鈕 (+) 打開“小工具塊菜單”,然後定位並添加搜尋小工具到你首選的小工具區域。不要忘記點擊頂部的“更新”按鈕保存更改。接下來,簡單地訪問你的网站並使用改進后的搜索框。

我們希望這篇文章幫助你學會如何在 WordPress 添加多語言搜索。你可能還想查看我們的 WordPress 搜尋错误修復教程以及如何在 WordPress 創建多語言網站地圖的文章。如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取更多 WordPress 教程影片。你也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 教学

如何為您的 WordPress 網站添加暗模式(簡單)

什麼是暗模式及為什麼要將其添加到您的網站?

許多移動設備和電腦使用暗模式來減少來自屏幕的白光,這可以減少眼睛疲勞,特別是在低光條件下。有些人甚至認為這允許您在夜間長時間使用電腦和移動設備而不會破壞睡眠。

一些設備內建了夜間模式,只是使用更暖的色調。然而,暗模式實際上為設備的背景添加了深色。一些熱門網站如 YouTube 提供內建的深色配色。

在桌面電腦上,您可以通過使用如 Night Eye 之類的 Chrome 擴展程序在暗模式下訪問網站。以下是使用該擴展程序訪問 WPressize Me 網站的樣子:

通過在您的網站上添加暗模式切換開關,用戶無需安裝特殊的瀏覽器擴展程序即可選擇他們喜歡的模式。您甚至可以將暗模式添加到您的 WordPress 管理區域中。如果您在夜間工作或眼睛感到疲勞,這將非常有用。

考慮到這一點,讓我們看看如何將暗模式添加到您的網站的公眾端和 WordPress 網站的管理區域。

提示:想使用深色配色,即使訪客的設備處於正常或白天模式?請查看我們推薦的最佳 WordPress 暗色主題列表。

如何為您的 WordPress 網站添加暗模式

創建網站暗模式的最簡單方法是使用 WP Dark Mode 插件。該插件添加了一個切換開關,以便訪客可以在您的網站上啟用暗模式。它甚至可以在管理區域中添加一個切換開關,這樣您可以為 WordPress 儀表板啟用暗模式。

首先,您需要安裝和啟用 WP Dark Mode 插件。有關更多詳細信息,請參閱我們的 WordPress 插件安裝指南。激活後,從 WordPress 儀表板中瀏覽到 WP Dark Mode » 設定 頁面,並將“啟用前端暗模式”開關切換到“開”。

完成後,您還可以為網站前端選擇默認模式。然後,點擊“保存更改”按鈕以存儲您的設置。

接下來,切換到“自定義”選項卡,根據您的喜好選擇開關佈局、大小和位置。您還可以更改暗模式開關的顏色,但您需要插件的專業版才能實現這一點。

完成後,只需點擊“保存更改”按鈕來存儲您的設置。現在訪問您的 WordPress 網站以查看暗模式切換進行的效果。

如果您查看網站的移動版本,您將看到暗模式也在智能手機和平板電腦上運作。

將暗模式添加到您的 WordPress 管理區域

您可以使用內建設置更改 WordPress 管理區域的配色方案,但是,默認配色方案中的白光並未減少。如果您在晚上工作或感到眼睛疲勞,可以向 WordPress 管理區域和區塊編輯器添加暗模式。

為此,瀏覽到 WP Dark Mode » 設定 頁面,並從左側欄切換到“管理面板暗模式”選項卡。這裡,將“啟用管理儀表板暗模式”的開關切換到“開”,然後點擊“保存更改”按鈕。

完成後,您會注意到暗模式開關已位於您的 WordPress 儀表板頂部。從這裡,您可以隨時切換開關來啟用此模式。

如果您還想為區塊編輯器添加暗模式,則必須將“區塊編輯器暗模式”開關切換到“開”。然後,點擊“保存更改”按鈕。

現在打開內容編輯器中的某個頁面或文章,您將注意到頂部有一個暗模式圖標。點擊它以展開選項卡並選擇“暗模式”。這就是您的區塊編輯器在暗模式下的樣子。

我們希望這篇文章能幫助您了解如何為您的 WordPress 網站添加暗模式。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 教学

如何在 WordPress 中選擇和使用巢狀區塊

如何在 WordPress 中選擇和使用巢狀區塊

更新日期:2024年6月25日 | 編輯部

您是否想了解如何在 WordPress 中選擇和使用巢狀區塊? WordPress 的 Gutenberg 巢狀區塊功能允許您在父區塊內添加多個區塊。這樣您可以同時定制不同的區塊元素,讓文章內容組織更加高效,設計上有更多靈活性。在本文中,我們將展示如何輕鬆選擇和使用 WordPress 的巢狀區塊功能。

什麼是 WordPress 巢狀區塊?

WordPress 的 Gutenberg 巢狀區塊功能允許您在一個區塊內插入(或“巢”)一個或多個區塊。巢狀區塊能幫助您在 WordPress 網站上創建更複雜的佈局,通過在每個區塊內添加多個區塊,從而在設計和格式化頁面和文章內容時提供更多靈活性。例如,您可以在一個組區塊內巢入多個圖片區塊,以顯示某特定活動的照片集或使用特定技術創作的藝術作品。

此外,巢狀區塊功能允許您分別編輯每個區塊,這意味著您可以根據需要自定義每個區塊而不影響其他區塊。這樣一來,可以更好地組織內容,使您的內容更具吸引力,並簡化創作過程。

如何使用 WordPress 巢狀區塊

您可以使用 Gutenberg 區塊編輯器中的組或列區塊輕鬆地將多個區塊巢在一起。首先,您需要從 WordPress 管理側邊欄中打開一篇已存在或新的文章。在這裡,簡單地點擊屏幕左上角的添加區塊 ‘+’ 按鈕,找到組區塊。點擊並添加到頁面後,您必須為將要巢在一起的區塊選擇佈局。在本教程中,我們將選擇‘組’佈局。

接下來,只需點擊屏幕上的 ‘+’ 按鈕即可開始在父區塊內添加內容。這次教程中,我們將添加一個圖片區塊。添加區塊後,只需在上方區塊工具欄中的點擊‘組’按鈕來選擇父區塊。接下來,您需要再次點擊 ‘+’ 按鈕打開區塊菜單,從中選擇要添加的其他區塊。

如何配置 WordPress 巢狀區塊設置

當您巢入多個區塊後,可以通過點擊每個區塊來配置它們的個別設置。這將打開右側列中的區塊設置。在這裡,您可以調整背景顏色、文字顏色和個別區塊的大小,而不影響巢在一起的其他區塊。

要配置所有巢狀區塊的設置,您需要點擊上方區塊工具欄中的‘組’按鈕。這將打開右側列中的父區塊設置。您現在可以配置所有巢狀區塊的對齊方式、方向、背景顏色、文字顏色和排版。請注意,這些設置將影響巢在父區塊內的所有區塊。

您還可以通過點擊任何區塊的頂部工具欄中的‘選項’按鈕來將現有的單個區塊轉換為巢狀區塊。這將打開一個菜單提示,您需要選擇‘創建模式’選項。一旦完成,會彈出一個提示要求您為您的新可重複使用區塊命名和選擇一個類別。然後,點擊‘創建’按鈕以存儲設置。滿意後,別忘了點擊‘發布’或‘更新’按鈕來保存更改。在我們的示例中,我們在一個組區塊內巢入了標題、圖片和段落區塊。這是巢狀區塊在我們的演示網站上的外觀。

附加:使用 Wayfinder 插件輕鬆選擇巢狀區塊

有時,當多個區塊巢在一起時,可能難以選擇和配置單個區塊。幸運的是,Wayfinder 插件讓您可以非常輕鬆地從父區塊中選擇巢狀區塊,並告訴您區塊的類型和類別。首先,您需要安裝並啟用 Wayfinder 插件。更多安裝說明,請參見我們的初學者指南:如何安裝 WordPress 插件。啟用後,從 WordPress 管理側邊欄進入設置 » Wayfinder 頁面。

進入後,所有設置已經啟用。您只需取消勾選不想使用的設置旁的框。例如,若您希望 Wayfinder 為編輯器中所有區塊顯示區塊類型,則保持‘顯示區塊類型’選項旁的框勾選。如果不希望插件顯示區塊類別,則只需取消勾選該選項旁的框。配置設置後,別忘了點擊‘保存更改’按鈕。接下來,您需要從儀表板中打開一篇已存在或新的文章:

進入後,將鼠標懸停在任何內部區塊上將顯示其名稱的輪廓。您還可以看到父區塊中任何巢狀區塊的輪廓和名稱。這將幫助您識別巢在組或列區塊中的所有不同區塊。您可以從父區塊中輕鬆選擇單個區塊來配置其設置。您還可以同時選擇所有巢狀區塊,只需單擊‘列’或‘組’標題。這將打開右側列中的父區塊設置。一旦完成區塊設置,簡單的點擊‘更新’或‘發布’按鈕來保存更改。

希望本文幫助您學會如何選擇和使用 WordPress 巢狀區塊。您還可以查看我們的逐步教程:如何在 WordPress 中更改區塊高度和寬度,以及我們推薦的必備 WordPress 插件來幫助您提升網站。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取更多 WordPress 教程視頻。您也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 教学

如何在WordPress中添加BMI计算器(逐步教程)

如何在WordPress中添加BMI计算器(逐步教程)

对于专注于健康和保健的网站,提供互动工具可以显著提升用户体验。身体质量指数(BMI)计算器就是一个好例子,它能为访客提供评估体重状况的有价值资源。在WPressize Me,我们的团队尝试了不同插件来创建BMI计算器,以找到最适合初学者使用的插件,并助力您的观众获得个性化健康见解。

通过遵循我们的逐步方法,您将能够添加这一功能,为访客提供更全面的健康与保健资源。

为什么要在WordPress中添加BMI计算器?

BMI代表身体质量指数。这是一个基于身高和体重的粗略身体脂肪测量方法,使用以下计算公式:BMI = kg/m2,其中kg是一个人的体重(千克),m2是他们的身高(米)的平方。

如果您使用的是英制单位,可以使用以下公式:BMI = lb/in2 * 703,其中lb是体重(磅),in2是身高(英寸)的平方,再乘以703。

BMI读数可以帮助您的访客、患者或客户了解他们是体重过轻、超重还是适合其身高的健康体重。然而,让人们自己进行计算并不是一个好的用户体验。

这时,BMI计算器就派上用场了。如果您开设了健康或健身博客,BMI计算器可以帮助访客规划他们的健康之旅的下一步。例如,决定减低BMI的人可能会注册您的健身追踪器。

BMI计算器也可以鼓励人们在您的网站上停留更长时间,这可以增加页面浏览量并降低跳出率。

方法一:使用WPForms创建BMI计算器(简单)

您可以轻松地使用WPForms在WordPress中创建BMI计算器。这是市场上最好的计算器插件,具有拖放生成器、1300多个预制模板以及完备的垃圾邮件保护功能。

该插件还提供了一个计算附加组件,让您可以添加任何您喜欢的计算器表单,包括BMI计算器、抵押贷款计算器和年龄计算器。

首先,您需要安装并激活WPForms插件。激活后,从WordPress后台访问WPForms » 设置页面,输入您的许可证密钥。接下来,访问WPForms » 附加组件页面,找到“Calculations Addon”,然后点击“安装附加组件”按钮。

接下来,转到WPForms » 新增页面。输入表单名称,然后找到“BMI计算器表单”模板并点击“使用模板”按钮。WPForms表单生成器将会打开,您可以从左侧栏拖放字段来调整表单的结构。

调整完表单后,点击顶部的“保存”按钮。然后,编辑您希望添加BMI计算器的页面/文章,点击添加区块‘+’按钮,选择WPForms区块,并从下拉菜单中选择BMI计算器表单。

最后,点击“更新”或“发布”按钮,现在您可以访问您的WordPress网站,查看BMI计算器了。

方法二:使用Formidable Forms创建BMI计算器(高级)

如果您想在计算器中显示BMI范围,我们建议使用Formidable Forms在WordPress中创建BMI计算器。首先,您需要安装并激活Formidable Forms插件。激活后,从WordPress后台访问Formidable » 全局设置页面,手动输入您的许可证密钥。

接下来,访问Formidable » 表单页面,点击“+ 新增”按钮,选择“计算器”标签,然后点击“使用模板”按钮下的“BMI计算器”模板。

在表单生成器中,您可以添加或删除字段,然后点击顶部的“保存”按钮。编辑希望添加BMI计算器的页面/文章,点击添加区块‘+’按钮,选择Formidable Forms区块,并从下拉菜单中选择刚创建的表单。

最后,点击“更新”或“发布”按钮,现在您可以访问您的WordPress博客或网站,查看BMI计算器了。

额外内容:在WordPress中创建健身追踪器

除了添加BMI计算器,您还可以在您的WordPress网站上添加一个健身追踪器。此追踪器可以是一个简单的表单,用户每月填写,以追踪他们的减重旅程。

如果您有一个健身博客,添加此追踪器可以增加网站的参与度,并鼓励更多用户注册并成为您的邮件列表的一部分。

希望本教程帮助您学习如何在WordPress中添加BMI计算器。您可能还想查看我们的指南,了解如何创建联系表单和商业网站必备的WordPress插件。

Read More
WordPress 教学

如何自定義和設計您的 WordPress 表單(兩種簡單方法)

如何自定義和設計您的 WordPress 表單(兩種簡單方法)

最後更新於 2024 年 4 月 25 日,編輯團隊撰寫 | 審核者:Syed Balkhi

分享:

為什麼要自定義和設計您的 WordPress 表單?

當您使用插件將表單添加到 WordPress 網站時,您會發現其布局通常簡單而單調。例如,使用用戶註冊表單插件添加註冊表單時,會發現其布局有些乏味,這可能無法吸引訪客的注意,甚至會讓他們不願填寫表單。

通過自定義您的表單,您可以將其與 WordPress 主題和品牌相匹配,使其更具吸引力。這可以帶來更多轉化,因為設計精美的 WordPress 表單更易於瀏覽,可以鼓勵更多用戶填寫它們。

設計美觀的表單還可以增加用戶對您品牌的認知。例如,您可以使用網站標誌和公司標識顏色使表單更具記憶性和有效性。

方法1:使用 WPForms 自定義和設計 WordPress 表單(無需代碼方法)

您可以輕鬆地使用 WPForms 來自定義和設計您的 WordPress 表單。它是市場上最好的 WordPress 聯繫表單插件,使用超過 600 萬個網站。WPForms 提供拖放生成器,使您可以非常簡單地創建任何類型的表單。此外,它還擁有預製的主題庫和內置的自定義選項,不需要任何代碼。

首先,您需要安裝並激活 WPForms 插件。詳細說明請參見我們的步驟指南「如何安裝 WordPress 插件」。注意:WPForms 也有免費版本可供本教程使用。然而,我們將使用高級插件,因為它具有更多設置和選項。

啟動後,從 WordPress 管理員側邊欄訪問 WPForms » 設置頁面,輸入您的許可密鑰。您可以在 WPForms 網站的帳戶中找到此信息。

完成後,從 WordPress 儀表板導航至 WPForms » 新增頁面。這將帶您來到「選擇模板」頁面,您可以從這裡開始鍵入表單名稱。之後,您可以選擇任何表單模板並點擊其下的「使用模板」按鈕。在本教程中,我們將創建並添加一個簡單的聯繫表單到我們的網站。

這將在 WPForms 表單生成器中啟動模板,您將看到右側的表單預覽以及左列的表單字段。從這裡,您可以根據喜好拖放任何表單字段到表單中,也可以重新排列或刪除字段。

完成表單後,點擊頂部的「保存」按鈕退出表單生成器。然後,您需要從 WordPress 儀表板導航到 WPForms » 設置頁面並勾選「使用現代標記」選項框。如果不這樣做,WPForms 自定義設置將無法在塊編輯器中使用。不要忘記點擊「保存更改」按鈕以存儲設置。

接下來,打開您想要添加剛剛創建的表單的頁面或文章。從這裡,您只需點擊左上角的添加塊按鈕‘+’以打開塊菜單並添加 WPForms 塊。完成後,從塊內的下拉菜單中選擇您想要添加到網站的表單。

現在您已經添加了表單,是時候來自定義和設計它了。要做到這一點,您必須打開屏幕右側的塊面板並滾動到「主題」部分。從這裡,您可以從 40 多個預設主題庫中選擇一個,以立即為表單賦予美觀的外觀。

接著,您可以滾動到「字段樣式」部分進一步自定義表單。您可以從下拉菜單中選擇表單字段的大小,甚至為它們設置邊框大小和半徑。接下來,您可以使用顏色選擇工具更改表單字段的背景、文本和邊框顏色。在這裡,使用品牌的標識顏色或 WordPress 網站中使用的其他顏色以創建一個視覺吸引力表單。

完成後,滾動到「標籤樣式」部分,您可以從下拉菜單中選擇標籤的字體大小。然後,您還可以更改表單中顯示的字段標籤、副標籤和錯誤消息的字體顏色。

要自定義表單中的按鈕,您需要滾動到「按鈕樣式」部分,並從下拉菜單中選擇其大小。您還可以設置邊框半徑並更改表單提交按鈕的背景和文本顏色。

自定義完表單後,只需點擊頂部的「更新」或「發布」按鈕以存儲設置。現在,您可以訪問您的網站觀看設計後的 WordPress 表單。

方法2:使用 CSS 設計 WordPress 表單(高級自定義)

如果您不想使用 WPForms 提供的自定義選項或希望使用 CSS 應用不同的自定義,您也可以使用自定義 CSS 片段來做到這一點。首先,您需要使用市場上最好的表單生成器 WPForms 創建表單。它是一個拖放生成器,提供許多模板,例如聯繫表單、文件上傳表單、註冊表單、RSVP 表單等。詳細說明,請參見我們的教程「如何在 WordPress 中創建聯繫表單」或方法 1。

創建完表單後,是時候使用市場上最好的 WordPress 代碼片段插件 WPCode 來自定義它。這是添加 CSS 代碼來設計您的 WordPress 表單最簡單和最安全的方法。首先,您需要安裝並激活 WPCode 插件。詳細說明,您可能希望參見我們的初學者指南「如何安裝 WordPress 插件」。注意:WPCode 有一個免費版本可供本教程使用。但是,我們將使用高級計劃。

啟動後,從 WordPress 儀表板導航到代碼片段 » + 新增片段頁面。一旦到那裡,只需點擊‘添加自定義代碼(新片段)’選項下的「使用片段」按鈕。

這將帶您到「創建自定義片段」頁面,您可以從這裡開始鍵入代碼片段的名稱。之後,從屏幕右上角的下拉選單中選擇「CSS 片段」。接著,將以下代碼複製並粘貼到「代碼預覽」框中:

#wpforms-0000 .wpforms-form {背景顏色:#ADD8E6 !重要;字體家庭:'Arial',無襯線 !重要;填充:20px 15px !重要;邊框:3px 寬實線 #666 !重要;邊框半徑:20px !重要;}

一鍵使用於 WordPress

完成後,您需要將頂部的默認短代碼替換成您要自定義表單的短代碼。要做到這一點,訪問 WordPress 儀表板中的 WPForms » 所有表單頁面並複製您要設計的表單的 WPForms ID 號碼。之後,在代碼中的 wpforms- 行旁邊粘貼表單的 ID 號碼。現在,所有代碼將僅在特定表單中執行。

接下來,您可以輕鬆更改背景顏色的十六進制代碼、添加您選擇的字體家族,並通過更改代碼片段來配置表單的填充和邊框半徑。完成後,滾動到「插入」部分並選擇「自動插入」模式。代碼將在啟動後自動在網站上執行。

最後,滾回頁面頂部並將開關切換到‘啟用’。之後,點擊「保存片段」按鈕以存儲設置。現在,WordPress 表單將根據 CSS 片段自動自定義,您可以查看它。如果尚未將表單添加到網站,只需在塊編輯器中打開頁面或文章。

一旦到那裡,點擊左上角的‘+’按鈕以打開塊菜單並添加 WPForms 塊。之後,從塊內的下拉選單中選擇您使用 CSS 片段設計的表單。最後,點擊「更新」或「發布」按鈕以存儲設置。現在,您可以訪問您的 WordPress 網站查看自定義後的表單。

Read More
WordPress 教学

如何在 WordPress 中顯示 Twitter 追隨者數量及更多資訊

如何在 WordPress 中顯示 Twitter 追隨者數量及更多資訊

最後更新於 2013 年 6 月 14 日 | 編輯部 | 審查者:Syed Balkhi

我們之前寫過一個可以顯示 Twitter 追隨者數量的程式碼,由 Rarst 貢獻。在這篇文章中,我們會分享一個更進階且更優雅的程式碼,讓你能夠在 WordPress 中顯示 Twitter 追隨者數量。這段程式碼同樣由 Rarst 貢獻。

功能

此功能不僅限於顯示追隨者數量,還可以抓取 Twitter 用户/顯示 API 方法所返回的任何非嵌套值。

它具有兩級快取機制:

  • 查詢值會以陣列形式儲存在資料庫中,使用 WP 選項設定為 $interval 秒;
  • API 響應會儲存於記憶體中,讓你能夠查詢任何數量的字段,而不會生成多餘的 API 請求。

這應該可以安全地同時用於多個值和多個用户,而不必擔心耗盡 API 限制。

教程

首先打開你的主題的 functions.php 文件,並添加以下程式碼:

function rarst_twitter_user( $username, $field, $display = false ) {
$interval = 3600;
$cache = get_option('rarst_twitter_user');
$url = 'http://api.twitter.com/1/users/show.json?screen_name='.urlencode($username);

if ( false == $cache )
$cache = array();

// if first time request add placeholder and force update
if ( !isset( $cache[$username][$field] ) ) {
$cache[$username][$field] = NULL;
$cache[$username]['lastcheck'] = 0;
}

// if outdated
if( $cache[$username]['lastcheck'] < (time()-$interval) ) {

// holds decoded JSON data in memory
static $memorycache;

if ( isset($memorycache[$username]) ) {
$data = $memorycache[$username];
}
else {
$result = wp_remote_retrieve_body(wp_remote_request($url));
$data = json_decode( $result );
if ( is_object($data) )
$memorycache[$username] = $data;
}

if ( is_object($data) ) {
// update all fields, known to be requested
foreach ($cache[$username] as $key => $value)
if( isset($data->$key) )
$cache[$username][$key] = $data->$key;

$cache[$username]['lastcheck'] = time();
}
else {
$cache[$username]['lastcheck'] = time()+60;
}

update_option( 'rarst_twitter_user', $cache );
}

if ( false != $display )
echo $cache[$username][$field];
return $cache[$username][$field];
}

完成程式碼插入後,你現在可以在任何 WordPress 模板文件中使用這段程式碼。簡單地插入以下程式碼:

echo rarst_twitter_user('wpressize-me', 'name').' has '.
rarst_twitter_user('wpressize-me', 'followers_count').' followers after '.
rarst_twitter_user('wpressize-me', 'statuses_count').' updates.';

上面的程式碼會顯示如下內容:

WPBeginner 擁有 5846 位追隨者,發布了 1300 條更新。

來源: Rarst

Read More