다음은 몇 가지 유용한 코드 스니펫입니다. 템플릿에 사용하거나 언젠가 필요했던 함수, 필터 및 CSS입니다. GeneratePress, 저는 사용하고 추천합니다.
어떤 사람들은 지원 포럼, 무궁무진한 솔루션의 원천을 제공합니다 문서 등을 통해 지원 문의 및 검색을 할 수 있습니다.
게시 날짜 옆에 항목에 업데이트 날짜 및 시간 표시
이 필터는 GeneratePress 항목의 업데이트 날짜 및 시간을 표시합니다. 설정/일반/날짜 형식/사용자 지정에서 날짜를 어떻게 구성했는지에 따라 달라집니다. 여기에 사용된 경우는 다음과 같습니다: d/m/Y : H:i
/* F메타 포스트에 게시 및 업데이트된 날짜 및 시간 */
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_date() !== get_the_modified_date() ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );밑줄 친 애니메이션 링크
CSS를 사용하여 아래 gif에 표시된 것과 같은 텍스트 링크에 애니메이션 효과를 만들 수 있습니다:
/* 배경색이 있는 애니메이션 링크 밑줄 */
p a{
font-weight: bold;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
background-repeat: no-repeat;
background-size: 100% 00%;
background-position: 0 111%;
-webkit-transition: background-size .25s ease-in;
transition: background-size .25s ease-in;
padding-left: 2px;
padding-right: 2px;
border-bottom: 2px solid #ec4911;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
p a:hover{
background-size: 100% 100%;
}배경 이미지와 테두리 하단에서 색상을 변경할 수 있습니다.
문단, 버튼 및 링크가 포함된 기타 요소의 동작을 관찰하여 제자리에 맞지 않는 부분이 없도록 조정해야 합니다.
코드는 다음과 같습니다. Kyle Van Deusen 그 외에도 The Admin Bar, 라는 흥미로운 블로그가 있습니다. Generatetweaks 에 GP 및 GB용 다크 모드와 같은 GeneratePress 및 GenerateBloks용 몇 가지 흥미로운 코드와 템플릿을 게시하고 있습니다.
태그 사이에 쉼표 제거
여기까지가 전부입니다.
태그 사이에 쉼표를 표시하지 않으려는 경우 이 필터를 사용하면 쉼표가 표시되지 않습니다.
레이블에 색상을 지정하거나 다른 기호를 사용하여 레이블을 구분하려는 경우 매우 유용합니다.
/* 레이블에서 쉼표 제거 */
add_filter('generate_term_separator', function($separator, $tags){
return " ";
}, 10, 2);카테고리 및 태그에 배경색 추가
이 CSS를 사용하면 모든 카테고리 및/또는 모든 태그에 원하는 색상을 추가할 수 있습니다.
예제의 CSS는 다음과 같이 표시합니다:
/* 카테고리 및 색상 */
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #B50000;
border-radius: 5px;
color: #FFF
}
/* 라벨 및 색상 */
.entry-meta .tags-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #006a05;
border-radius: 5px;
color: #FFFF
}
/* 카테고리 및 태그 라인 간격 */
.cat-links {
margin-bottom: 10px;
}카테고리 또는 레이블마다 다른 배경색을 표시합니다.
이 CSS를 사용하면 각 카테고리에 다른 색상을 지정할 수 있습니다. 이렇게 하려면 수정하려는 각 카테고리 또는 태그에 대해 이와 같은 글을 작성해야 합니다. 첫 번째 예에서는 "워드프레스" 카테고리가 파란색 배경과 흰색 텍스트로 사용되었습니다. 두 번째 예에서는 "블로그" 태그가 주황색 배경과 흰색 텍스트로 사용되었습니다.
Y este es el resultado.:
/* 카테고리 또는 레이블마다 다른 색상 표시 */
#main span.cat-links a[href*="wordpress"] {
background-color: #005ca5;
color: white;
}
#main span.tags-links a[href*="blog"] {
background-color: #d47e00;
color: white;
}아카이브 위젯에 연도만 표시
이 함수는 아카이브 위젯 드롭다운에 월 대신 연도만 표시되도록 합니다. 기본 워드프레스 위젯에서 작동하므로 모든 템플릿에서 사용할 수 있습니다. 블로그가 매우 오래되어 월 드롭다운이 이미 너무 긴 경우에 유용합니다. 이 예에서는 게시된 글의 수와 함께 표시됩니다.
/* 위젯 아카이브에 연도만 표시 */
function my_limit_archives( $args ) {
$args['type'] = 'yearly';
return $args;
}
add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
플러그인 없이 간단한 읽기 진행률 표시줄
워드프레스에 읽기 진행률 표시줄을 추가하는 여러 플러그인과 다음용 애드온이 있습니다. Elementor, 하지만 약간의 코드와 GeneratePress 엘리먼트 필터를 사용하면 훨씬 더 가볍게 만들 수 있습니다. 이 코드는 다음에서 가져온 것입니다. Somnath Sahu.
*이 예제에서는 GeneratePress 버전을 사용해야 합니다. Premium .
먼저 요소로 필터링 이 코드를 사용합니다.
<div class="progress-container">
<div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>wp_head 위치로 설정하고 항목 / 모든 항목 아래에 표시합니다.
/*** 진행률 표시줄 - 진행률 표시줄 **/
.progress-container {
width: 100%;
height: 8px;
background: #ccc; /** Change Progress bar background color **/
}
.progress-bar {
height: 8px;
background: #a70404; /** Change Progress bar color **/
width: 0%;
position:fixed;
z-index:999;
}색상을 녹색으로 변경한 후 이 코드가 표시되는 방식입니다.
진행률 표시줄은 화면 상단에 표시되며, 아래로 스크롤할 때 함께 표시되고 위로 스크롤할 때 줄어듭니다.
특정 페이지에서만 로고 변경
이 기능이 필요했던 적이 있었는데 당시 다음 웹 사이트에서 찾았습니다.David Lanau.
필터는 지정한 페이지에만 다른 로고를 표시합니다.
특정 테마의 콘텐츠를 그룹화한 카테고리 페이지에 다른 로고를 넣는 데 이 로고를 사용했습니다.
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// 서비스 페이지에 있는 경우 이 페이지에 대한 사용자 지정 로고를 넣습니다.
if ( is_page( 'servicios' ) )
return '여기에 로고의 URL을 입력합니다.';
// 그렇지 않은 경우 일반 로고
return $logo;
}모바일 버전에서 시베바 숨기기
여전히 사이드바를 사용 중이면서 AMP 페이지, 를 사용하여 사이드바가 있는 기본 GeneratePress 모바일 버전을 사용하는 경우 이 CSS를 사용하면 모바일 버전에 대해서만 사이드바를 숨길 수 있습니다.
이 경우 하위 테마의 스타일시트 또는 사용자 정의/추가 CSS에서 추가할 수 있습니다.
오른쪽 사이드바 숨기기
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}왼쪽 사이드바 숨기기
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}둘 다 숨기기
두 개의 사이드바를 숨깁니다.
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}루프 왼쪽과 오른쪽에 추천 이미지 표시
사용하는 경우 직원 마케팅 담당자 등의 GeneratePress를 사용하면 이 코드를 사용하여 추천 이미지를 루프에서 왼쪽 또는 오른쪽으로 번갈아 표시할 수 있습니다.
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}다음 코드에서 이 코드를 찾았습니다. aquigeneratepress.com 에서 다른 유용한 팁을 찾을 수 있습니다. 결과는 다음과 같습니다:
'자세히 보기' 버튼 사용자 지정
위와 같이 이 CSS는 '자세히 보기' 버튼을 위한 것입니다. 제가 여기서 사용하는 것으로, 첫 페이지의 발췌문 아래 오른쪽에 배치합니다.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}항목 페이지 매김 스타일
필터와 약간의 CSS를 사용하여 첫 페이지에서 항목의 페이지 매김을 이 모양으로 만들 수 있습니다. 여기에서 원하는 대로 구성할 수 있습니다.
가장 먼저 할 일은 하위 테마의 functions.php 또는 코드 스니펫에 추가할 수 있는 이 필터를 사용하여 이전과 다음이라는 단어를 << 및 >> 기호로 바꾸는 것입니다.
/* 탐색에서 이전 및 다음을 << 및 >>로 변경합니다. */
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );
add_filter( 'generate_next_link_text', function() {
return '>>';
} );그런 다음 이전 사례와 동일한 방식으로 추가한 CSS는 다음과 같습니다.
/* 홈 페이지 항목 */
#nav-below {
text-align: center;
}
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #870000;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}검색 엔진 상자 중앙에 배치
기본 생성 프레스 검색 엔진은 약간 형편없으며, 여기에 약간의 CSS를 사용하여 장치에 맞게 조정하고 중앙에 배치합니다.
/* 메인 메뉴의 센터 검색창*/
form.search-form.navigation-search.nav-search-active {
width:50%;
left:50%;
transform:translateX(-50%)
}
/* 모바일 - 태블릿 및 PC의 반응형 검색창 */
@media (max-width: 768px) {
/* CSS in here for mobile only */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
.inside-navigation {
align-items: flex-end !important;
flex-direction:column-reverse;
}
}
@media (min-width: 1025px) {
/* CSS in here for desktop only */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}
카테고리 및 레이블의 텍스트 크기
글 아래에 카테고리와 태그를 표시하는 경우 이 CSS를 추가하여 크기를 변경하고 원하는 스타일에 맞게 CSS를 계속 추가할 수 있습니다. 수정할 모든 클래스는 문서 또는 CSS 자체에서 찾을 수 있지만 복잡하게 만들고 싶지 않고 여기에서 크기만 변경하려는 경우 여기에 남겨 둡니다.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}
