WordPress 內容管理系統,有時候部落格某些文章不希望所有訪客閱覽到,就會在發佈文章或頁面設置密碼,只有知道密碼的讀者才能夠打開文章內容,WP默認的密碼提示樣式不太美觀,想手動進行二次美化修改及優化。
文章或頁面加入密碼後,就會出現提示「這是一篇受密碼保護的文章,您需要提供訪問密碼:」或「這篇內容受到密碼保護。如需檢視內容,請於下方欄位輸入密碼:」然後也有Input輸入框填寫密碼。但是!WP預設的密碼頁樣式不太好看,想修改更加美麗,你可以在主題目錄的CSS文件,加入以下代碼,並適當修改到自己心目中喜歡的樣貌。
CSS:
.post-password-form {
padding-top: 15px;
}
.post-password-form p {
filter: glow(color:crimson, strength=2);
color: white;
font-weight: 900;
text-shadow: 1px 1px 5px crimson;
}
.post-password-form:first-letter {
font-size: 2.1em;
}
.post-password-form label {
margin-bottom: 10px;
}
.post-password-form input[type="password"] {
width: 95%;
padding: 10px;
margin: 10px 0;
font-size: 16px;
border-radius: 4px;
border: none;
color: #00000060;
background: #6BD089;
}
.post-password-form input[type="password"]::placeholder {
color: #00000060;
}
.post-password-form input[type="password"]:focus {
color: #000000;
outline: none;
}
.post-password-form input[type="submit"] {
background: #085820;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:active {
background: #44000A;
color: #ffffff;
}