makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

워드프레스 Page Builder의 Post Loop 위젯에 more 버튼 추가

워드프레스 페이지를 좀 더 쉽게 관리하기 위한 용도로 Page Builder 플러그인을 사용하는 경우가 있는데, BC TOWN에서는 다음과 같은 플러그인을 주로 활용합니다.

 

 

https://wordpress.org/plugins/siteorigin-panels/

 

pagebuilder

 

 

 

Page Bulder by SiteOrigin 플러그인을 활용해서 페이지를 구성할 때, 다음과 같이 Post Loop 위젯을 활용하는 경우가 많습니다.

 

 

pagebuilder2

 

 

 

 

위 그림을 보면 개별 글 제목에는 링크가 설정되어 있는데, 카테고리 제목에는 링크를 설정할 수 없어 불편합니다. 그래서 카테고리 제목 클릭 시 해당 카테고리로 이동할 수 있는 링크를 추가하는 방법을 알아 보겠습니다.

 

 

1. basic.php 파일 수정

 

basic.php 파일 위치는 다음과 같습니다.

 

~/wp-content/plugins/siteorigin-panels/widgets/basic.php

 

basic.php 파일에서 다음을 수정해 줍니다.

 

수정 전:
   if ( !empty( $instance['title'] ) ) {
        echo $args['before_title'] . $instance['title'] . $args['after_title'];
   }

수정 후:
   if ( !empty( $instance['title'] ) ) {
        $bc_cat = &get_category($query_args['cat']);			
        echo $args['before_title'] . $instance['title'] . '<span class="so-more"><a href=category/agenda/' . $bc_cat->slug . '>' . 'more' . '</a></span>' . $args['after_title'];
   }


 

 

 

2. 스타일 수정

 

more 버튼을 감싸고 있는 so-more 클래스에 스타일을 추가할 수 있습니다. 스타일 추가는 개인적인 취향이기 때문에 각자 추가해 주면 됩니다.

 

 

 

3. 코드 적용 결과

 

1번 basic.php 파일 수정 후 결과는 다음과 같습니다.

 

pagebuilder3

 

 

 

위 그림에서 more 버튼이 추가된 것을 확인할 수 있습니다. more 버튼을 클릭하면 다음과 같이 해당 카테고리 페이지로 이동하는 것을 볼 수 있습니다.

 

 

pagebuilder4

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함1. Start with the system updatesudo apt update...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우원인파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...

BCT Ai Chatbot

답변을 준비중입니다 . . .