14 GeneratePress에 유용한 코드

 

다음은 몇 가지 유용한 코드 스니펫입니다. 템플릿에 사용하거나 언젠가 필요했던 함수, 필터 및 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에 표시된 것과 같은 텍스트 링크에 애니메이션 효과를 만들 수 있습니다:

14 GeneratePress에 유용한 코드

/* 배경색이 있는 애니메이션 링크 밑줄 */
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는 다음과 같이 표시합니다:

14 GeneratePress에 유용한 코드
/* 카테고리 및 색상 */
.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.:

14 GeneratePress에 유용한 코드
/* 카테고리 또는 레이블마다 다른 색상 표시 */
#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' );
10 Códigos útiles para GeneratePress

플러그인 없이 간단한 읽기 진행률 표시줄

워드프레스에 읽기 진행률 표시줄을 추가하는 여러 플러그인과 다음용 애드온이 있습니다. 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 위치로 설정하고 항목 / 모든 항목 아래에 표시합니다.

14 GeneratePress에 유용한 코드
표시하려면 다음 CSS를 추가하면 됩니다 자녀 테마 또는 사용자 정의/추가 CSS에서 블로그에 맞게 스타일을 지정합니다.
/*** 진행률 표시줄 - 진행률 표시줄 **/
.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;
}

색상을 녹색으로 변경한 후 이 코드가 표시되는 방식입니다.

진행률 표시줄은 화면 상단에 표시되며, 아래로 스크롤할 때 함께 표시되고 위로 스크롤할 때 줄어듭니다.

14 GeneratePress에 유용한 코드

특정 페이지에서만 로고 변경

이 기능이 필요했던 적이 있었는데 당시 다음 웹 사이트에서 찾았습니다.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 에서 다른 유용한 팁을 찾을 수 있습니다. 결과는 다음과 같습니다:

14 GeneratePress에 유용한 코드

'자세히 보기' 버튼 사용자 지정

위와 같이 이 CSS는 '자세히 보기' 버튼을 위한 것입니다. 제가 여기서 사용하는 것으로, 첫 페이지의 발췌문 아래 오른쪽에 배치합니다.

a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}

항목 페이지 매김 스타일

필터와 약간의 CSS를 사용하여 첫 페이지에서 항목의 페이지 매김을 이 모양으로 만들 수 있습니다. 여기에서 원하는 대로 구성할 수 있습니다.

14 GeneratePress에 유용한 코드

가장 먼저 할 일은 하위 테마의 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%)
    }
}
14 GeneratePress에 유용한 코드

카테고리 및 레이블의 텍스트 크기

글 아래에 카테고리와 태그를 표시하는 경우 이 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;

}

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting