還沒有測試但是先留資料
https://blog.csdn.net/qq_2842405070/article/details/70238829
要隱藏滾動條主要是針對ie…因為內捲軸的滾動條如果不隱藏,版面上就要留一個捲軸寬度,會搞的很麻煩….
等其他瀏覽器都處理完再來測試
還沒有測試但是先留資料
https://blog.csdn.net/qq_2842405070/article/details/70238829
要隱藏滾動條主要是針對ie…因為內捲軸的滾動條如果不隱藏,版面上就要留一個捲軸寬度,會搞的很麻煩….
等其他瀏覽器都處理完再來測試
參考文章:HTML table 表格 thead 表頭固定,tbody 滾動
css解法可用,以下是改良,他原本用 > 主要是避免表格內又包表格。但我需要用捲軸的通常不會再包表格,所以可以直接用空格就好。
thead tr{
display: table;
width: 100%;
table-layout: fixed;
}
tbody{
display: block;
height: 271px;
overflow-y: scroll;
}
tbody tr{
display: table;
width: 100%;
table-layout: fixed;}
然後table-layout的說明看這篇:善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度
裡面提到
「CSS 的 table-layout 屬性有兩個可以設定的值:
automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
fixed 表格的總寬度決定於表格 width 屬性的定義,以及各欄位(Column) width 屬性的定義」
簡單來說預設值 automatic 要整個表格讀完,瀏覽器才能確認總寬度。
fixed 代表如果你有定義寬,那就直接用定義的寬度。
所以後者顯示速度會比較快。這個有沒有加不影響上述css把表格變成有捲軸。但可以加快網頁成像的速度。
然後讓表格底下有捲軸而且正常顯示的關鍵是要針對tr下 display: table;跟width: 100%;
感覺應該是把tr模擬成表格
總之真的是蠻神奇的設定,可以用就對了。
看wp的套件覺得神奇所以查了一下,要用jQuery的套件。用了以後html可以變很簡潔,就跟設定背景圖一樣,不用用iframe。找到這篇文章還沒細看。以後要用再來研究細節:p
實做技巧參考這篇
重點摘要:
input[type=
"checkbox"
] {
display
:
none
;
}
input[type=
"checkbox"
] + label span
input[type=
"checkbox"
]:checked + label span
然後第一次看到+,使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器,css選擇器可以參考這篇
然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul 跟 .aaa ul 的差異是:
後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul,這層就不會被套用。
我沒在用但是紀錄一下
把目前做順的流程跟注意事項整理一下
然後如果有整體的背景音效。記得要另外做一個包容全部的Comp,把其他小Comp串接起來以後,在大Comp內才放背景音效,這樣才能貫串。
解法說明:https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad
線上產生自訂英文字形的 svg 字體檔:https://www.fontsquirrel.com/tools/webfont-generator
簡單來說,iphone系列不吃普通 .ttf 字體格式,所以你把這個丟到自己空間,只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files,就會 GG。
不過我在測試的時候遇到很奇怪的事情,後來回去看 stackoverflow 裡面,解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。
簡單來說就是我套用失敗,但我的狀況比較奇葩,就是我用線上svg字體產生檔他產生的範例檔案,在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候,卻又一直卡關。我交叉測試確認路徑是否正確,跟電腦還有安卓手機吃到的是否是我產生出來的檔案,都確認沒問題,但就是 ipad 上怎麼看都看不到,用無痕視窗開也一樣。
stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)
我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。
所以結論是有兩種解法
大概是這樣。
最近接了幾個案子都用 blooger ,有些之前不知道現在才知道原來可以這樣的東西記錄一下。
我本來以為 AMP 版本是自帶不能改。但看這裡寫是可以,只是要先從「主題 > 行動服務」那裡切換。他可以切換成不要用 AMP,直接用網頁本身手機版(其實就還是電腦版啦,只是有做RWD的顯示就會是手機版),或是用 AMP 但可以自訂樣版內容,但就要在行動版內的「主題」選擇自訂。這樣在自訂範本的時候,裡面才匯出現對應的原始碼讓你自己調整。
最近很常用 wordpress 架站,也因此用了一些 plugin 跟踩到一些以前沒踩過的雷。趁還有印象做一下紀錄
如果你跟我一樣主要要架的是「媒體站」,推薦可以到 wordpressplugintheme 買樣板,比起其他站他的樣板選擇其實不多,但重點是很便宜且沒有限制只能使用在幾個網址上。我這次幾個站都用 Newspaper9 這個樣板,可調整性蠻高的。因為在這裡買 theme 或 plugin 便宜太多,之後別的站我應該會考慮在這裡買一些 plugin 來玩玩試用。
因為這次有個業主有一些要求,所以我有特別多找了一些外掛。但也因為以前沒裝過,踩了一些雷,在這裡就一起記錄一下。這裡我只列自己額外裝的,搭配樣板 Newspaper9 必要裝的我就不在這裡列出。
有雷外掛
有雷是後來發現裡面有個防火牆的設定,造成google機器人完全無法爬網站以至於不收錄內容。這根本宣判網站死刑….一開始我完全搞不清楚為什麼,跑去找 seo 大手朋友求救。後來自己重新去比照兩個站,想到有問題的站有多裝這個外掛,就去用英文搜了一下找到這篇 AIOWP security plugin blocks google from indexing site.
bingo!跟我用一樣的外掛,遇到一樣的問題。不過我沒有停用這個外掛,因為這個外掛有很多功能,讓我可以裝了他一個就夠。後來有找出擋掉 google bot 的設定大概在哪裡,最後解決問題。這裡來說說為什麼我還是保留這個外掛。
這幾個是我覺得這個外掛好用且方便的地方,因為如果不是用這個外掛,我得另外找別的好幾個外掛才可以把上述設定都處理好。用這個外掛一次就可以解決很方便。
但這個外掛實際上可以做的設定更多,這個就請要裝的自己去研究吧!
然後踩到雷的部分,我後來推敲應該是在 firewall 那裡的設定,但因為我實在是太害怕網站不被 google 收錄了,所以這部分我索性直接把防火牆裡面所有設定都讓他恢復預設,就是都沒有勾,等於不設防火牆。這樣做以後 google 收錄的部分就恢復正常。但至於到底是哪些設定造成擋掉,我沒有那個實驗精神所以也不確定。只能說確定一定是 firewall 裡面的設定造成的。
所以這個外掛我還是會推薦下載安裝,只是設定的時候自己要多注意。
無雷外掛
最近我手上兩個媒體網站都是在 linode 上架站,使用 cloudflare 的免費 ssl。但是在 wp 上使用 cloudflare 的免費 ssl 是會有雷的。簡單來說就是如果直接使用 Cloudflare Flexible SSL ,會出現幾種狀況:
我手上兩個站一個遇到1一個遇到2,兩者使用的解法也不同,基本上擇一種方法使用即可。在這裡簡單寫給大家參考,詳細的就請自己去找 cloudflare 的說明囉。
這是無心插柳裝的,但推薦裝一下,簡單來說就是自動生成可以提交給 google 的 sitemap,還不錯用。
因為一開始裝的時候發生一些狀況,所以去找了幾個跟效能調校有關的 plugin ,這是其中之一。參考文章「WordPress 效能調教心得」。下載外掛
網頁快取外掛,加速瀏覽者讀取網站的速度,同時可以降低主機負擔。
參考文章「Hyper Cache 效果非常好的WordPress快取外掛!」
wp有自動把文章不斷儲存版本的功能,但是我覺得這個實在太吃空間跟效能了。所以找了這個,可以自訂要儲存幾個版本,以及手動把多餘的版本刪除。
因為網站文章有註解的需求,最後選了這個,簡單好用。