整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          在 CSS 中隱藏元素的 10 種方法

          CSS中很多隱藏元素的方法,但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

          • 動畫: 一些CSS隱藏元素的方法一般是全有或者全無,元素要么是完全可見,要么是完全不可見,并且沒有中間狀態(tài)。其他的,比如透明度,可以是一個范圍的值,所以在這中間過程插入動畫成為可能;
          • 可訪問性: 下面的每一種方法都會在視覺上隱藏一個元素,但不一樣會真正的去除DOM元素。有一些方式隱藏元素后,屏幕閱讀器仍然能讀取到元素內容;
          • 事件處理: 隱藏元素之后,有些方式元素上的事件仍然能被觸發(fā),而有些方式就會導致元素上的事件觸發(fā)無效;
          • 表現(xiàn): 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后,頁面將分三個階段呈現(xiàn):布局(生成每個元素的幾何位置)、繪制(繪制每個元素的像素)、組合(以適當?shù)捻樞蚍胖迷貙樱H導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下,瀏覽器還可以使用硬件加速。

          下面就來看看CSS中隱藏元素的方式,以及每種方式的優(yōu)缺點。

          1. opacity 和 filter: opacity()

          opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數(shù)字,或者 0% 和 100% 之間的百分比,對應地表示完全透明和完全不透明。

          • opacity: N:該屬性用來設置元素的透明度;
          • filter: opacity(N) :filter屬性用來設置元素的濾鏡,opacity是濾鏡重的透明度,用來設置元素的透明度。
          div {
              opacity: 0;
          }
          
          div {
              filter: opacity(0%);
          }
          復制代碼

          在現(xiàn)代瀏覽器中,這兩者之間幾乎沒有實際的區(qū)別,但如果同時應用多種效果(模糊、對比度、灰度等)時,應該使用 filter 屬性。

          注意:opacity 可以設置動畫并提供出色的性能,但頁面上保留完全透明的元素可能會觸發(fā)事件。



          2. color alpha 透明度

          可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0),這樣就會使元素完全透明:

          div {
          	color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
          }
          復制代碼

          這三個屬性都是支持設置動畫效果的,需要注意,透明度不能應用于帶有背景圖片的元素,除非它們是使用 linear-gradient 或類似方法生成的。

          Alpha 通道可以設置為:

          • transparent:完全透明(中間不能插入動畫);
          • rgba(r, g, b, a):紅色、綠色、藍色和 alpha;
          • hsla(h, s, l, a):色相、飽和度、亮度和 alpha;
          • #RRGGBBAA 或 #RGBA。

          3. transform

          transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏:

          div {
          	transform: scale(0);
          }
          
          div {
          	translate(-9999px, 0px)
          }
          復制代碼

          transform 屬性提供了出色的性能和硬件加速,因為元素被有效地移動到了單獨的層中,并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣,并不會受影響。使用這種方式隱藏的元素不會觸發(fā)任何事件。



          4. clip-path

          clip-path 屬性可以創(chuàng)建一個剪輯區(qū)域,用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

          div {
          	clip-path: circle(0);
          }
          復制代碼

          clip-path為添加動畫效果提供了空間,不過它只能在現(xiàn)代瀏覽器中使用。



          5. visibility: hidden

          visibility 屬性可以設置為 visible 或 hidden 來顯示和隱藏元素。

          div {
          	visibility: hidden;
          }
          復制代碼

          除非使用collapse值,否則元素使用的空間保持不變。


          6. display: none

          display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據(jù)位置,也不會響應綁定的監(jiān)聽事件。

          div {
            display: none;
          }
          復制代碼

          然而,在大多數(shù)情況下,display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流,或者采用contain屬性,否則它的隱藏過程無法設置動畫,并將觸發(fā)頁面重新布局。



          7. z-index

          可以通過將元素的 z-index 屬性設置為負值,以實現(xiàn)元素的隱藏。這實際上就是將元素放在了我們看不到的層。

          div {
            z-index: -1;
          }
          復制代碼


          8. position

          position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此,絕對定位的元素可以通過左鍵:-9999px 等值移出屏幕:

          div {
            position: absolute;
            left: -999px;
          }
          復制代碼



          9. 覆蓋另一個元素

          通過在元素的上面放置與背景顏色相同的元素,可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現(xiàn):

          div::after {
            position: absolute;
            content: '';
            top: 0;
            bottom: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
          }
          復制代碼

          雖然這從技術上講是可以實現(xiàn)的,但是這樣做需要更多的代碼。



          10. 縮小尺寸

          可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現(xiàn)元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

          div {
            height: 0;
            padding: 0;
            overflow: hidden;
          }
          復制代碼

          使用這種形式我們可以在隱藏過程中使用動畫效果,并且他的性能會比 transform 好很多。


          分類:

          文鏈接:How to Hide Title for Selective WordPress Posts and Pages
          原文標題:How to Hide the Title for Selective WordPress Posts and Pages
          由遼觀進行翻譯整理。

          Do you want to hide the title for selective WordPress posts and pages?
          您想要隱藏特定的WordPress文章和頁面的標題嗎?

          Titles can be helpful for both search engines and visitors, but not every page needs to display a title depending on its design.
          標題對于搜索引擎和訪問者都很有幫助,但并非每個頁面都需要根據(jù)其設計顯示標題。

          In this article, we will show you how to hide the title for specific WordPress posts and pages.
          在這篇文章中,我們將向您展示如何隱藏特定的WordPress文章和頁面的標題。

          Why Hide the Title on Specific WordPress Posts or Pages? 為什么要在特定的WordPress文章或頁面上隱藏標題呢?

          When you create a WordPress page or post the first thing you’ll see is an ‘Add title’ field where you will type your title.
          當您創(chuàng)建WordPress頁面或文章時,您首先會看到一個“添加標題”的字段,您可以在其中鍵入標題。

          Most WordPress themes show this title at the top of the page or post. A descriptive, relevant title can let visitors know they’re in the right place and what to expect from this page.
          大多數(shù)WordPress主題會在頁面或文章的頂部顯示這個標題。一個描述性的、相關的標題可以讓訪問者知道他們來到了正確的地方,并且可以對這個頁面有所期待。

          Titles may be helpful, but not every page or post needs a title. Your website’s homepage is one common example.
          標題可能是有幫助的,但并不是每個頁面或文章都需要標題。您網(wǎng)站的首頁就是一個常見的例子。

          At other times you may want to show the page’s title in a different area. For example you might start your landing page with an eye-catching banner, and then show the title further down the page.
          在其他情況下,您可能希望在不同的區(qū)顯示頁面的標題。例如,您可能會在引人注目的橫幅上開始您的登陸頁面,然后在頁面下方顯示標題。

          In this guide, we’ll be covering three different methods to hide the post or page title in WordPress. Simply click the links below to jump to the method you prefer.
          在本指南中,我們將介紹三種在WordPress中隱藏帖子或頁面標題的不同方法。只需點擊面的鏈接,跳轉到您喜歡的方法。

          • Method 1: Remove All Post Titles in the Full Site Editor
            方法1:在全站編輯器中刪除所有帖子標題
          • Method 2. Hide Titles on Specific Posts or Pages Using CSS
            方法2:使用CSS隱藏特定帖子或頁面的標題
          • Method 3. Hiding Selective WordPress Titles Using a Plugin
            方法3:使用插件隱藏選擇性的WordPress標題
          • Method 4. Hiding Selective WordPress Titles in Custom Page Designs
            方法4:在自定義頁面設計中隱藏選擇性的WordPress標題

          Method 1: Remove Post Title Using Full Site Editor方法1:在全站編輯器中刪除所有帖子標題

          If you’re using WordPress 5.9 or later, and have aWordPress themethat supports full site editing, then you can use this method to remove the title from all posts or all pages.
          如果您使用的是WordPress 5.9或更高版本,并且擁有一個支持全站編輯的WordPress主題,那么您可以使用這種方法來刪除所有帖子或頁面的標題。

          Not sure if your theme support full site editing?
          不確定您的主題是否支持全站編輯?

          If it does, then you’ll see the menu optionAppearance ? Editoravailable in your WordPress dashboard.
          如果支持全站編輯,您將在WordPress儀表板中看到菜單選項“外觀 ? 編輯器”。

          After clicking on ‘Editor’, the full site editor will launch.
          點擊“編輯器”后,將啟動全站編輯器。

          From here, you’ll need to select thetemplateyou want to edit by clicking on the dropdown at the top of the page, and then clicking on ‘Browse all templates’.
          在這里,您需要通過點擊頁面頂部的下拉菜單,并點擊“瀏覽所有模板”,來選擇您想要編輯的模板。

          In this example, we’ll edit the Single Post template so that we can hide all our blog post titles.
          在這個例子中,我們將編輯單篇文章模板,以便隱藏所有博客文章的標題。

          To hide the title, first you’ll need to click on the blog post title. Then, simply click on the three dots options menu and select the ‘Remove Post Title’ option at the bottom.
          要隱藏標題,首先需要點擊博客文章的標題。然后,只需點擊三個點的選項菜單,并在底部選擇“刪除文章標題”選項。

          Don’t forget to click the Save button at the top of the screen after you’re done customizing the template.
          在您完成對模板進行自定義后,不要忘記點擊屏幕頂部的保存按鈕。

          That’s it, you’ve hidden the title on all your blog posts.
          完成了!您已經(jīng)在所有博客文章中隱藏了標題。

          If you’d like a way to hide the title only on specific posts or pages, the next method should work for you.
          如果您想要僅在特定的文章或頁面上隱藏標題,下一種方法可能適合您。

          Method 2: Hiding Selective WordPress Titles Using CSS方法2:使用CSS隱藏特定帖子或頁面的標題

          You can hide a page or post’s title by adding custom CSS code to theWordPress Customizer. This method simply hides the title from your visitors, but it still loads in the page’s HTML code.
          您可以通過向WordPress自定義器添加自定義CSS代碼來隱藏頁面或文章的標題。這種方法只是從訪客的視野中隱藏標題,但它仍然會在頁面的HTML代碼中加載。

          This means that search engines can still use the title to help them understand your page’s contents, which is good for yourWordPress website’s SEOand can help you get more traffic.
          這意味著搜索引擎仍然可以使用標題來幫助它們理解您頁面的內容,這對于您的WordPress網(wǎng)站的SEO非常有益,可以幫助您獲得更多的流量。

          We’ll show you how to hide the title on specific posts or pages, or on all your posts and pages.
          我們將向您展示如何在特定的文章或頁面上隱藏標題,或者在所有文章和頁面上都隱藏標題。

          2.1 How to Hide the Title on a Specific WordPress Post or Page With CSS如何使用CSS在特定的WordPress文章或頁面上隱藏標題

          To hide a page or post’s title using CSS, you just need to know its ID.
          要使用CSS隱藏頁面或文章的標題,您只需要知道它的ID。

          In your WordPress dashboard, either go toPosts ? All Posts, orPages ? All Pages. Then find the page or post where you want to hide the title.
          在WordPress儀表板中,要么轉到“文章” ? “所有文章”,要么轉到“頁面” ? “所有頁面”。然后找到您想要隱藏標題的頁面或文章。

          You can now open this post or page for editing.
          您現(xiàn)在可以打開此文章或頁面進行編輯。

          Now simply take a look at the URL in your browser’s address bar.
          現(xiàn)在只需查看瀏覽器地址欄中的URL。

          You should see a ‘post=’ section followed by a number. For example ‘post=100.’
          您應該看到一個由數(shù)字跟隨的“post=”部分。例如,“post=100”。

          This is your post’s ID. Make a note of this number, as you’ll be using it in your CSS code.
          這是您的文章的ID。請記下這個數(shù)字,因為您將在CSS代碼中使用它。

          You can now go to Appearance ? Customize.
          現(xiàn)在您可以轉到“外觀” ? “自定義”。

          This launches the WordPress Customizer.
          這將啟動WordPress自定義器。

          In the sidebar, simply click on Additional CSS.
          在側邊欄中,只需單擊“附加CSS”。

          Now scroll to the bottom of the sidebar.
          現(xiàn)在滾動到側邊欄底部。

          You should now see a small text editor. This is where you’ll type your CSS code.
          您現(xiàn)在應該看到一個小型文本編輯器。這是您輸入CSS代碼的地方。

          If you want to hide the title for a post, you’ll need to use the following code.
          如果您想隱藏文章的標題,您需要使用以下代碼。

          Just make sure you replace the ‘100’ with the post ID you got in the previous step.
          只需確保將“100”替換為您在前一步驟中獲得的文章ID。

          .postid-100 .entry-title {
          display: none;
          }

          If you want to hide a page’s title, you’ll need to use some slightly different code.
          如果您想隱藏頁面的標題,您需要使用略有不同的代碼。

          Once again make sure you replace the ‘100’ with your real page ID.
          如果您想隱藏頁面的標題,您需要使用略有不同的代碼。

          .page-id-100 .entry-title {
          display: none;
          }

          Next, just scroll to the top of the page.
          接下來,將頁面滾動到頂部。

          You can then click on the blue Publish button.
          然后,您可以點擊藍色的“發(fā)布”按鈕。

          Now if you check this page or post, the title should have disappeared.
          現(xiàn)在,如果您檢查此頁面或文章,標題應該已經(jīng)消失了。

          Is the title still there?
          標題還在嗎?

          If this method hasn’t worked for you, your WordPress theme may be using a different CSS class. This means your page or post ID will be different from the number shown in its URL.
          如果這種方法對您不起作用,那么您的WordPress主題可能正在使用不同的CSS類。這意味著您的頁面或文章ID將與其URL中顯示的數(shù)字不同。

          To get the correct ID, you’ll need to use your browser’s developer console.
          要獲取正確的ID,您需要使用瀏覽器的開發(fā)者控制臺。

          To start, head over to the page or post on your WordPress website. You can then open your browser’s developer console.
          首先,轉到WordPress網(wǎng)站上的頁面或文章。然后,您可以打開瀏覽器的開發(fā)者控制臺。

          This step will vary depending on which web browser you’re using. For example, if you have Chrome then you can use the Control+Shift+J keyboard shortcut on Windows, or the Command+Option+J shortcut on Mac.
          這一步驟會根據(jù)您使用的Web瀏覽器而有所不同。例如,如果您使用的是Chrome瀏覽器,您可以在Windows上使用Control+Shift+J鍵盤快捷鍵,或者在Mac上使用Command+Option+J快捷鍵。

          Chrome users can also Control+click anywhere on the page or post, and then select Inspect.
          Chrome用戶還可以在頁面或文章的任何位置Control+點擊,然后選擇”Inspect“。

          If you’re unsure how to open the developer console, you can always check your browser’s website or official documentation for more information.
          如果您不知道如何打開開發(fā)者控制臺,您可以隨時查看瀏覽器的網(wǎng)站或官方文檔以獲取更多信息。

          In the developer console, click on the three dotted icon. You can then select ‘Search.’
          在開發(fā)者控制臺中,點擊三個點的圖標。然后,您可以選擇“搜索”。

          You should now see a search bar towards the bottom of the developer console.
          現(xiàn)在,您應該會在開發(fā)者控制臺的底部看到一個搜索欄。

          In this bar, type <body class, then simply press the Enter key on your keyboard.
          在此欄中,鍵入<body class,然后只需按下鍵盤上的Enter鍵。

          If you’re looking at a WordPress page, you should see something similar to the following.
          如果您正在查看一個WordPress頁面,您應該會看到類似以下的內容。

          <body class="page-template-default page page-id-78 logged-in admin-bar 
          no-customize-support wp-embed-responsive is-light-theme no-js singular">

          In the sample code above, you can see that the ‘page-id’ value is 78.
          在上面的示例代碼中,可以看到"page-id"的值為78。

          If you’re inspecting a WordPress post, the console should show something like:
          如果您在檢查WordPress文章,控制臺應該顯示類似以下內容:

          <body class="post-template-default single single-post postid-100 single-format-standard logged-in admin-bar no-customize-support wp-embed-responsive is-light-theme no-js singular">

          In that example, the ‘postid’ value is 100. You can now use this value with the CSS code we provided in the previous step.
          在這個示例中,"postid"的值為100。您現(xiàn)在可以將這個值與我們在上一步中提供的CSS代碼一起使用。

          Simply add this code to your website using the WordPress Customizer, following the process described above.
          只需按照上述描述的過程,使用WordPress自定義器將此代碼添加到您的網(wǎng)站上即可。

          You can now take a look at the page or post. The title should have vanished.
          您現(xiàn)在可以查看頁面或文章。標題應該已經(jīng)消失了。

          2.2 How to Hide the Title on All Posts or Pages with CSS如何使用CSS隱藏所有帖子或頁面的標題

          To hide the titles for all your pages and posts, copy/paste the following into the text editor.
          要隱藏所有頁面和帖子的標題,請將以下內容復制/粘貼到文本編輯器中。

          .entry-title {
          display: none;
          } 

          Do you want to hide the titles for all your pages, but not your posts? To hide all the page titles, copy/paste the following into the small text editor.
          您想要隱藏所有頁面的標題,但不隱藏帖子的標題嗎?為了隱藏所有頁面的標題,請將以下內容復制/粘貼到小文本編輯器中。

          .page .entry-title {
          display: none;
          } 

          Another option is hiding the title for all of your posts. You can do this using the following CSS.
          另一個選擇是隱藏所有帖子的標題。您可以使用以下CSS代碼來實現(xiàn)。

          .post .entry-title {
          display: none;
          } 

          Sometimes you may want to hide the titles for all your posts and pages.
          有時候您可能希望隱藏所有頁面和帖子的標題。

          To do that, add the following.
          要做到這一點,請?zhí)砑右韵麓a。

          .entry-title {
             display: none; 
          }

          Method 3: Hiding Selective WordPress Titles Using a Plugin第三種方法:使用插件隱藏選擇性的WordPress標題

          You can easily hide the title for selective posts and posts using Hide Page And Post Title. This free plugin lets you hide the title of any page, post, or even custom posts types.
          您可以使用Hide Page And Post Title輕松地隱藏選擇性的頁面和帖子的標題。這個免費插件允許您隱藏任何頁面、帖子,甚至自定義帖子類型的標題。

          譯者注:請注意,隱藏標題后,頁面或帖子的標題將不再顯示在前臺,但標題仍然存在于后臺編輯界面,您可以隨時修改和恢復標題的顯示。

          First you’ll need to install and activate the Hide Page And Post Title plugin. If you need help, you can follow our tutorial on how to install a WordPress plugin.
          首先,您需要安裝并激活Hide Page And Post Title插件。如果需要幫助,您可以按照我們的WordPress插件安裝教程進行操作。

          Upon activation, open the page, post or custom post you want to edit.
          在激活插件后,打開您想要編輯的頁面、帖子或自定義帖子。

          Now simply scroll to the bottom of the right sidebar.
          現(xiàn)在只需要向右邊欄的底部滾動。

          Here you’ll find a new ‘Hide Page and Post Title’ box.
          在這里,您會找到一個名為“隱藏頁面和帖子標題”的新框。

          譯者注:請注意,這個框可能在編輯頁面或帖子的不同位置,具體取決于您的主題或其他插件的設置。通常,您可以在編輯頁面或帖子的右側邊欄或編輯器中找到該框。

          To hide the title, just click to select the ‘Hide the title’ checkbox. You can then update or publish this post as normal.
          要隱藏標題,只需點擊選擇“隱藏標題”復選框。然后,您可以像正常編輯頁面或發(fā)布帖子一樣更新或發(fā)布。

          That’s it! If you visit the page you’ll notice that the title has disappeared.
          就是這樣!如果您訪問該頁面,您會注意到標題已經(jīng)消失了。

          At some point you may need to restore this page or post’s title.
          在某些時候,您可能需要恢復該頁面或帖子的標題。

          This is easy. Just open the page or post for editing. Then click to deselect the same ‘Hide the title’ checkbox.
          這很簡單。只需打開要編輯的頁面或帖子。然后點擊取消選擇相同的“隱藏標題”復選框。

          Don’t forget to click on the Update button at the top of the screen. Now if you visit this page, the title should have reappeared.
          不要忘記點擊屏幕頂部的“更新”按鈕。現(xiàn)在,如果您訪問此頁面,標題應該已經(jīng)重新出現(xiàn)。

          Method 4: Hiding Selective WordPress Titles Using SeedProd方法四:使用SeedProd隱藏選擇性的WordPress標題

          Another option is to hide the title using a page builder plugin.
          另一個選項是使用頁面構建器插件隱藏標題。

          SeedProd is the best WordPress page builder plugin in the market. You can use this plugin to easily creating custom pages or even create your own WordPress theme.
          SeedProd是市場上最好的WordPress頁面構建器插件。您可以使用這個插件輕松創(chuàng)建自定義頁面,甚至創(chuàng)建自己的WordPress主題。

          This means you can easily hide the title on a custom page design or your theme.
          這意味著您可以輕松地在自定義頁面設計或您的主題中隱藏標題。

          SeedProd comes with a template library with over 150+ templates you can use as a starting point for your page designs. Let’s see how easy it is to remove the title from one of these theme templates.
          SeedProd附帶了一個模板庫,其中包含150多個模板,您可以用作頁面設計的起點。讓我們看看如何從其中一個主題模板中刪除標題。

          In your WordPress dashboard go to SeedProd ? Template Builder. You can then click on the Themes button.
          在WordPress儀表板中,轉到SeedProd ? 模板構建器。然后,您可以點擊主題按鈕。

          This launches the SeedProd template library. You can now browse through all of the different designs.
          這將啟動SeedProd模板庫。您現(xiàn)在可以瀏覽所有不同的設計。

          To take a closer look at a template simply hover your mouse over it. Then click on the magnifying glass icon.
          要仔細查看模板,只需將鼠標懸停在其上,然后點擊放大鏡圖標。

          This will open the template in a new tab.
          這將在一個新標簽中打開模板。

          When you find a template that you want to use, hover your mouse over that template. Then simply click on the checkmark icon.
          當您找到一個要使用的模板時,將鼠標懸停在該模板上。然后只需點擊復選標記圖標即可。

          This adds all of this template’s designs to your WordPress dashboard.
          這將把這個模板的所有設計添加到您的WordPress儀表板中。

          There are usually different designs for different types of content.
          通常針對不同類型的內容有不同的設計。

          You can use these templates to hide the title for the different content types. For example, many SeedProd templates have a separate design for the homepage.
          您可以使用這些模板來隱藏不同內容類型的標題。例如,許多SeedProd模板都有一個專門的設計用于首頁。

          To hide the title for your homepage, you would simply need to edit the Homepage template.
          要隱藏首頁的標題,您只需要編輯首頁模板即可。

          To hide the title for all your posts, you’ll typically need to edit the Single Post template.
          要隱藏所有文章的標題,通常需要編輯Single Post模板。

          Meanwhile if you want to hide the title from your pages you’ll usually edit SeedProd’s Single Page template.
          而如果您想隱藏頁面的標題,則通常需要編輯SeedProd的Single Page模板。

          To edit a template hover your mouse over it.
          要編輯模板,請將鼠標懸停在模板上。

          You can then go ahead and click on the Edit Design link.
          然后,您可以點擊“編輯設計”鏈接進行編輯。

          This opens this design in the SeedProd drag and drop editor. To hide the title, find either the Post or Page Title.
          這將在SeedProd的拖放編輯器中打開此設計。要隱藏標題,請找到“文章標題”或“頁面標題”。

          Once you spot this title, give it a click. SeedProd’s sidebar will now show all of the settings for the selected area.
          一旦找到標題,請點擊它。SeedProd的側邊欄將顯示所選區(qū)域的所有設置。

          At the top of this panel you should see either Post Title or Page Title.
          在這個面板的頂部,您應該看到“文章標題”或“頁面標題”。

          After confirming that you’ve selected the right area, hover over the Post Title or Page Title in the main SeedProd editor.
          確認選擇了正確的區(qū)域后,在主SeedProd編輯器中將鼠標懸停在“文章標題”或“頁面標題”上。

          You should now see a row of controls.
          現(xiàn)在您應該看到一行控件。

          To remove the title from this design just click on the Trash icon.
          要從此設計中刪除標題,只需點擊垃圾桶圖標。

          SeedProd will ask whether you really want to delete the title. To go ahead and remove it, simply click on ‘Yes, delete it!’
          SeedProd將詢問您是否真的要刪除標題。要繼續(xù)刪除,請點擊“是,刪除它!”

          The title will now disappear from your design.
          標題現(xiàn)在將從您的設計中消失。

          To see how this will look on your website click on the Preview button.
          要查看它在您的網(wǎng)站上的效果,請點擊“預覽”按鈕。

          When you’re happy with your design click on the Publish button.
          當您對設計滿意時,請點擊“發(fā)布”按鈕。

          Depending on how your site is set up, you may need to remove the title from some additional templates. For example you might want to hide the title for all your posts and pages. In this case, you would typically need to edit both the Single Post and Single Page templates.
          根據(jù)您的網(wǎng)站設置,您可能需要從一些額外的模板中刪除標題。例如,您可能希望隱藏所有文章和頁面的標題。在這種情況下,您通常需要編輯單篇文章和單頁模板。

          If you’re unsure then it may help to review all the designs that make up your theme. To do this simply go to SeedProd ? Theme Builder.
          如果您不確定,可以檢查一下組成您主題的所有設計。只需轉到SeedProd ? 主題構建器

          You should now see a list of all your different designs. You can now edit any of these templates following the same process described above.
          您現(xiàn)在應該可以看到所有不同設計的列表。您現(xiàn)在可以按照上面描述的相同步驟編輯任何這些模板。

          FAQs About Hiding the Title for Selective Pages and Posts有關選擇性隱藏頁面和文章標題的常見問題

          Before hiding your page or post titles, there are some effects you should think about, such as the impact this action will have on your website’s SEO.
          在隱藏頁面或文章標題之前,您應該考慮一些影響,比如此操作對您的網(wǎng)站SEO的影響。

          That being said, here are some of the most frequently asked questions about hiding the page and post title.
          話雖如此,以下是關于隱藏頁面和文章標題的一些常見問題:

          Why can’t I just leave the ‘Add title’ field blank?為什么我不能只是將“添加標題”字段留空?

          When it comes to hiding the title there seems like an easy fix. As you’re creating your page, just leave the title field blank.
          在隱藏標題方面,似乎有一個簡單的解決方法。在創(chuàng)建頁面時,只需將標題字段留空即可。

          At first this does seem to fix the problem. WordPress will display this post to visitors without a title. However, there are a few problems.
          起初,這似乎解決了問題。WordPress將在沒有標題的情況下向訪問者顯示此頁面或文章。然而,確實存在一些問題。

          Firstly, this page or post will appear as ‘(no title)’ in your WordPress dashboard. This makes it more difficult to keep track of your pages.
          首先,在WordPress儀表板中,該頁面或文章將顯示為“(no title)”(無標題)。這使得跟蹤頁面變得更加困難。

          If you create lots of different ‘(no title)’ posts, then how do you know which is your contact us page? And which page is your homepage?
          如果您創(chuàng)建了許多不同的“(no title)”文章,那么您如何知道哪個是您的聯(lián)系我們頁面?哪個是您的首頁?

          WordPress also uses the title to create the page’s URL.
          WordPress還使用標題來創(chuàng)建頁面的URL。

          If you don’t provide a title, then by default WordPress uses a number instead, such as ‘www.mywebsite/8.’
          如果您不提供,WordPress默認使用一個數(shù)字,“wwwwebsite/8”。

          Visitors often use the URL to help them understand where they are on your WordPress website, so ‘www.mywebsite/8’ isn’t particularly helpful.
          訪問者通常使用URL來幫助他們理解自己在WordPress網(wǎng)站上的位置,“www.mywebsite/8”并不特別有幫助。

          This vague URL is not an SEO-friendly permalink, so search engines may have a harder time understanding what your content is about and including it in the relevant search results.
          這種模糊的URL不是一個友好的SEO永久鏈接,所以搜索引擎可能很難理解您的內容是關于什么,并將其包含在相關的搜索結果中。

          Will hiding the page or post title affect my SEO?隱藏頁面或文章標題可能會對您的SEO產(chǎn)生影響。

          If you prefer to hide a page or post’s title, you’ll want to spend some extra time fine-tuning the rest of your WordPress SEO, including setting an SEO title. This will help ensure that the search engines understand your page’s content, even without the title.
          如果您希望隱藏頁面或文章的標題,您需要額外花費一些時間來優(yōu)化您的WordPress SEO,包括設置SEO標題。這樣可以確保搜索引擎即使沒有標題也能理解頁面的內容。

          Here you’ll need a good SEO plugin, since WordPress doesn’t let you do this by default.
          在這里,您將需要一個好的SEO插件,因為WordPress默認情況下不允許您這樣做。

          We recommend using AIOSEO, the best SEO plugin for WordPress in the market. This beginner friendly SEO toolkit is used by over 3 million websites.
          我們推薦使用AIOSEO,這是市場上最好的WordPress SEO插件。這個適合初學者的SEO工具包被超過300萬個網(wǎng)站使用。

          If you need help getting started, then please refer to our guide on how to properly set up All in One SEO in WordPress.
          如果您需要幫助入門,請參考我們的指南,了解如何正確設置WordPress中的All in One SEO。

          To make sure your titles are optimized, you can see our guide on how to use the headline analyzer in AIOSEO.
          為了確保您的標題被優(yōu)化,您可以參考我們的指南,了解如何使用AIOSEO中的標題分析器。

          We hope this article helped you learn how to hide the title for selective WordPress posts and pages. You can also go through our guide on how to choose the best web design software, and the best WordPress landing page plugins.
          我們希望本文能幫助您學習如何隱藏選擇性WordPress文章和頁面的標題。您還可以閱讀我們的指南,了解如何選擇最佳的網(wǎng)頁設計軟件和最佳的WordPress落地頁插件。

          If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
          如果您喜歡這篇文章,請訂閱我們的YouTube頻道,觀看WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。

          現(xiàn)實中,我們時常需要在網(wǎng)頁中展示你的聯(lián)系方式,其中Email郵件地址通常需要提供在頁面上。但是在網(wǎng)絡機器人泛濫的互聯(lián)中,如果直接顯示你郵件,則很可能被他們識別并拷貝,然后對你的郵件地址實施郵件轟炸。為了避免這個問題,需要利用技術手段來保護你的地址,使其只能被人眼看到,并且支持直接鏈接發(fā)送郵件,但是不能被網(wǎng)絡機器人識別到,一般常用的方法是通過JS,Html,CSS對地址隱藏,但是編寫代碼有點繁瑣,可能還要引入額外的JS庫才能實現(xiàn),而且還有一個缺點就是對一些限制級別的設備上,瀏覽器可能會禁用掉JS功能,這樣會導致頁面不能正常工作。此處給大家介紹一種基于SVG方法的郵件地址保護技術,可以極大程度的保護你免受機器人騷擾以及保證在瀏覽器禁用JS情況下仍然可以正常工作。

          優(yōu)點

          在JavaScript禁用的情況下工作

          主要優(yōu)點 這種基于SVG的電子郵件保護方法沒有用的任何的JavaScript代碼。

          因此,即使訪問者瀏覽器禁用了JavaScript,頁面上顯示的電子郵件地址仍然可用、可訪問和受到保護,同時保持安全并免受垃圾郵件機器人的攻擊。

          允許標準mailto:鏈接

          與其他不需要JavaScript的方法(例如,通過插入不可見的HTML注釋或插入可見元素并隨后通過CSS隱藏它們來混淆電子郵件地址)不同,這基于SVG的方法 允許標準 mailto:鏈接。主要區(qū)別是:mailto:鏈接存在于外部 SVG文檔內部,而不是 內部引用的HTML文檔。

          像圖像一樣隱藏內容,像文本一樣可復制

          第三個優(yōu)點是嵌入式SVG類似于圖像,但不是圖像。作為嵌入超文本文檔中的替換元素,SVG可以像圖像一樣有效地隱藏垃圾郵件地址的電子郵件地址。

          但嚴格來說,SVG是圖形文檔,而非實際圖像。

          因此,與圖像不同,人類訪問者仍然可以通過右鍵單擊電子郵件地址來復制電子郵件地址 <text>嵌入SVG中的元素。這對于傳統(tǒng)圖像方法來說,無法多做到手動復制地址(但是可以使用圖像文本識別OCR技術來實現(xiàn))。

          基本方法

          我們以一個最簡單的Emil鏈接地址共享為例。示例中由兩個兩個文件組成:其中SVG圖形文檔通過<object>標簽方式嵌入到主HTML頁面中,基本語法如下:

          <object data="svg-email-protection.svg" type="image/svg+xml" /></object>。

          注意,同一個SVG圖形文檔支持在多個地方,進行嵌入。主頁面HTML(main.htm)源代碼如下,一個很簡單的頁面:

          <!DOCTYPE html>
          <html lang="en-GB">
          <head>
          <meta charset="utf-8">
          <title>SVG Email Protection</title>
          <style>
          .cc {
          width: 180px;
          height: 24px;
          vertical-align: middle;
          }
          </style>
          </head>
          <body>
          <p>請郵件聯(lián)系我: <object class="cc" data="svg-email-protection.svg" type="image/svg+xml"></object></p>
          </body>
          </html>

          SVG文檔(svgprot-chongchong)代碼:

          <svg xmlns="http://www.w3.org/2000/svg"
          lang="en-GB"
          aria-labelledby="title"
          viewBox="0 0 200 24">
          <title id="title"> SVG Email Protection</title>
          <defs>
          <style type="text/css"><![CDATA[
          rect {
          width: 200px;
          height: 24px;
          fill: rgb(255, 255, 255);
          }
          a:focus rect,
          rect:hover {
          rx: 4px;
          ry: 4px;
          fill: rgb(0, 0, 255);
          }
          text {
          font-size: 16px;
          fill: rgb(0, 0, 255);
          pointer-events: none;
          }
          a:focus text,
          rect:hover + text {
          fill: rgb(255, 255, 255);
          font-weight: 900;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
          text-decoration: underline 1px solid rgb(255, 255, 255);
          text-underline-offset: 5px;
          }
          ]]></style>
          </defs>
          <a href="mailto:chongchong[at]ijz.me" aria-label="點擊發(fā)郵件">
          <rect />
          <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"> chongchong[at]ijz.me</text>
          </a>
          </svg>

          將以上兩個文件放到同意目錄,然后用瀏覽器打開主頁面main.hm就可以看到效果了

          總結

          本文給大家介紹了一種基于SVG文檔的優(yōu)雅的郵件保護方法,可以極大的免受網(wǎng)絡機器人竊取你的郵件地址進行騷擾攻擊,同時支持emailto鏈接,支持無JS瀏覽器下正常工作,支持手動郵件復制等優(yōu)點,當然該方法也是只能抵擋一般性規(guī)模化工作的Web機器人攻擊,如果遇到高級機器人,比如可以模仿真人訪問行為的,可以分析語法找到SVG文件進行獲取地址的高級機器人則無防御能力。


          主站蜘蛛池模板: 无码一区二区波多野结衣播放搜索 | 无码人妻视频一区二区三区 | 免费高清在线影片一区| 亚洲香蕉久久一区二区| 在线观看国产一区| 国产一区二区视频免费| 亚洲一区二区三区乱码A| 亚洲国产av一区二区三区丶| 2014AV天堂无码一区| 国产一区二区三区在线2021 | 国产精品一区二区久久| 国产精品视频一区二区三区| 99久久精品午夜一区二区| 日韩一区二区超清视频| 精品国产日韩亚洲一区91| 国产在线观看精品一区二区三区91| 精品人妻少妇一区二区三区不卡 | 国产精品无码一区二区在线| 久久一区二区三区精华液使用方法| 国产日韩一区二区三区| 日本一区二区三区久久| 国产精品区AV一区二区| 国产在线观看一区精品| 精品人伦一区二区三区潘金莲| 在线观看国产一区二三区| 日韩视频免费一区二区三区| 精品日本一区二区三区在线观看| 国产精品一区二区三区免费| 国产精品夜色一区二区三区| 国产亚洲福利精品一区二区| 无码视频一区二区三区在线观看| 2020天堂中文字幕一区在线观| 日本一区二区三区在线网| 一区二区三区在线免费看| 午夜精品一区二区三区在线视| 无码人妻AV免费一区二区三区| 一区二区网站在线观看| 无码国产精品久久一区免费| 男女久久久国产一区二区三区| 区三区激情福利综合中文字幕在线一区 | 一区二区视频在线免费观看|