GeneratePress 테마에서 작성자 상자를 추가하는 방법. [2021]

추가 플러그인을 설치하지 않고도 Generatepress 테마에 작성자 상자를 추가할 수 있다는 사실을 알고 계십니까?

그래서 블로거를 돕기 위해 Generatepress 테마의 요소 기능을 사용하여 작성자 상자를 추가하는 방법에 대한 자세한 가이드를 준비했습니다.

왜 WordPress에 작성자 상자 플러그인을 추가하고 작업을 더 간단하게 만들지 않는지 묻는 분들이 많다는 것을 알고 있습니다. 추가 플러그인을 설치하면 웹사이트 속도에 영향을 줄 수 있기 때문입니다. 기본 Generatepress 요소 기능을 사용하여 작성자 상자를 생성하려면 일부 사용자 정의 HTML 및 CSS 코드를 사용하는 것이 좋습니다.

참고: 이 트릭은 WordPress 웹사이트에 Generatepress 프리미엄 플러그인이 설치된 경우에만 사용할 수 있습니다.

웹사이트에 작성자 상자가 필요한 이유는 무엇입니까?

블로그 게시물 끝에 작성자 상자를 추가하면 독자와 Google, Bing과 같은 검색 엔진이 기사 뒤에 숨은 사람을 알 수 있습니다.

그것은 독자와 저자 사이에 좋은 관계와 신뢰를 구축하고 인터넷 커뮤니티에서 권위 를 구축하는 데 도움이됩니다.

EAT 알고리즘 에 대해 알고 있습니까? Google에서 좋은 순위를 얻으려면 전문성, 권위 및 신뢰성 을 구축하여 브랜드를 만들어야 합니다. 이것이 바로 EAT가 의미하는 것입니다. Author Box는 이를 달성하기 위한 첫 번째 단계입니다.

generatePress 테마에 작성자 상자를 추가하는 단계입니다.

Generatepress 테마에 작성자 상자를 추가하기 전에 WordPress에서 몇 가지 기본 설정을 수행해야 합니다.

1. 프로필 사진 및 작성자 설명 추가

WordPress 대시보드 로 이동하여 사용자 섹션을 클릭합니다. 이제 사용자 이름 바로 아래에 있는 편집 버튼을 클릭합니다.

이제 아래로 스크롤하면 " 자신에 대해 "라는 옵션이 표시됩니다. 여기 " 전기 정보 "에서 작성자 설명을 작성하고 바로 아래에 프로필 사진을 설정합니다.

참고: 간단한 트릭을 사용하여 작성자 상자 에 회사 소개 페이지에 대한 링크를 추가할 수도 있습니다. 전기 정보에 이 형식으로 링크를 붙여넣습니다.

<a href=”https://key2blogging.co/about-us/”>회사 소개 페이지</a>

이런 식으로, 작성자 상자 에 링크가 있는 앵커 텍스트를 쉽게 추가할 수 있습니다. GeneratePress 테마.

Gravatar를 추가하지 않은 경우 여기에 표시된 대로 아래 링크를 클릭하여 추가할 수 있습니다.

WordPress에 언급된 이메일 주소로 계정을 만든 다음 거기에 프로필 이미지를 업로드해야 하는 Gravatar 웹사이트 로 리디렉션됩니다. 프로필 사진을 자동으로 WordPress 계정으로 가져옵니다.

2. 요소 모듈 활성화

요소 모듈을 활성화하려면 모양 > GeneratePress > 요소 > 활성화 로 이동하십시오.

이미 완료했다면 세 번째 단계로 건너뛸 수 있습니다.

3. 새 후크 요소 생성

이제 모양 섹션을 클릭하면 " 요소 "라는 옵션이 표시되면 클릭하십시오. 이제 " 새 요소 추가 "를 클릭하고 후크 를 선택합니다.

4. 제목을 "Author Box"로 설정하고 HTML 코드를 붙여넣습니다.

제목을 Author Box로 설정하고 코드 편집기에 아래 HTML 코드를 붙여넣어야 합니다.

아래 코드 복사

 <div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. 후크 설정 설정

코드를 붙여넣은 후 Hook 설정을 지정해야 합니다. 후크 옵션에서 " 콘텐츠 후 생성 "을 선택한 다음 " PHP 실행 " 을 클릭하고 우선 순위를 " 20 " 으로 설정하십시오 .

6. 표시 규칙 설정

이제 설정 바로 오른쪽에 있는 표시 규칙을 클릭합니다. 이제 위치에서 " All singular "를 선택하고 제외 탭에서 " Frontpage "를 선택합니다.

이제 Hook 설정을 완료했습니다. 따라서 게시 버튼을 누르십시오.

7. CSS 코드 추가

이제 CSS 코드를 사용하여 작성자 상자를 디자인해야 합니다. 따라서 모양 >> 사용자 정의 >> 추가 CSS 로 이동하여 아래 코드를 붙여넣고 게시 버튼을 누르십시오.

CSS 코드 복사:

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

축하합니다 . 플러그인 없이 Generatepress 테마에 Author 상자를 성공적으로 추가했습니다.

비디오 가이드:

참고 : Generatepress 테마의 무료 버전 을 사용하는 경우 플러그인을 사용하여 작성자 상자를 추가해야 합니다.

결론

이제 WordPress의 Generatepress 테마에 Author 상자를 추가하는 단계별 프로세스를 다루었습니다. 의심 스러운 점이 있으면 댓글 섹션 에서 저에게 질문하거나 Twitter 에서 저를 연결해 주세요.

이 가이드가 마음에 들면 블로그 커뮤니티와 공유하고 노력에 감사드립니다. 고맙습니다.

더 읽어보기 : 블로거를 위한 10가지 유용한 크롬 확장 프로그램