Storefront에서 바닥글을 변경하는 방법 - 3가지 쉬운 방법

StoreFront 테마에서 바닥글을 변경하는 방법을 알고 싶으십니까? 이 게시물은 당신을 위한 것입니다. 이 가이드에서는 2가지 다른 방법을 보여줍니다.

스토어프론트 소개

Storefront는 최고의 WooCommerce 테마 중 하나이며 전자 상거래 상점에서 널리 사용됩니다. 이 테마는 Automattic에서 개발했으며 WordPress.org 저장소와 공식 WooCommerce 웹사이트에서 모두 사용할 수 있습니다.

또한 사이트의 모든 부분을 쉽게 사용자 지정할 수 있는 매우 유연한 테마입니다. WordPress에서 머리글을 편집하는 방법과 바닥글을 사용자 지정하는 방법을 이미 보았으므로 오늘은 Storefront를 사용하여 웹사이트의 바닥글을 변경하는 방법을 살펴보겠습니다. 그러나 이를 수행하는 방법을 보기 전에 상점 바닥글을 사용자 정의하려는 이유를 살펴보겠습니다.

WordPress 사이트 바닥글을 변경하는 이유는 무엇입니까?

사이트 관리자가 주로 머리글에 집중하지만 바닥글은 모든 웹사이트의 필수 영역이기도 합니다. 웹사이트 및 해당 서비스에 대한 중요한 세부 정보를 추가하고, 정책, 연락처 정보, 소셜 미디어에 대한 링크와 같은 항목을 제거하거나 추가할 수 있습니다. 귀하가 소유하거나 관련된 다른 제품, 서비스 및 웹사이트에 대한 링크를 추가할 수도 있습니다.

또한 대부분의 테마에는 바닥글을 최대한 활용하는 데 사용할 수 있는 여러 바닥글 위젯이 포함되어 있습니다. 예를 들어, Storefront 테마에는 검색 표시줄, 소셜 미디어 아이콘 또는 일반 단락이나 텍스트와 같은 위젯을 추가하는 데 사용할 수 있는 4가지 위젯 열이 있습니다.

또한 Google Search Console이나 Google 애드센스 인증 또는 Google Analytics 통합을 원하지만 헤더를 통해 수행하고 싶지 않은 경우 푸터에 코드를 포함할 수 있습니다.

요약하면 바닥글의 모든 정보는 방문자가 귀하와 귀하의 서비스에 대해 더 많이 알게 되고 참여도를 높이는 데 도움이 될 수 있습니다. 최대한 효과적으로 만들려면 콘텐츠와 디자인 측면에서 모두 사용자 지정해야 합니다. 어떻게 하는지 봅시다.

Storefront에서 바닥글을 변경하는 방법

Storefront 테마에서 바닥글을 쉽게 변경하는 3가지 방법이 있습니다.

1. WordPress 대시보드에서
2. 플러그인으로
3. 프로그래밍 방식으로

이러한 방법들을 살펴보자.

1. WordPress 대시보드에서 Storefront의 바닥글 변경

Storefront 테마를 설치하면 기본 바닥글이 아래 제공된 이미지와 같이 표시됩니다.

그러나 WordPress 대시보드를 사용하면 웹사이트 바닥글의 대부분의 요소를 추가하거나 편집할 수 있습니다. 위젯, 테마 커스터마이저, 테마 편집기와 같은 다양한 대시보드 메뉴에서 바닥글을 편집하고 색상, 위젯 또는 기타 정보를 변경할 수도 있습니다.

이러한 각 작업을 단계별로 수행하는 방법을 살펴보겠습니다.

1.1. Storefront에서 바닥글 색상 변경

라이브 사용자 지정 도구를 사용하여 Storefront에서 바닥글을 변경하려면 모양 > 사용자 지정 으로 이동합니다. WordPress 라이브 커스터마이저로 리디렉션됩니다.

여기에서 웹사이트 모양에 대한 거의 모든 것을 사용자 정의할 수 있습니다. 예를 들어 사이트 ID, 머리글, 바닥글, 배경 및 위젯을 편집할 수 있습니다. 변경 사항은 화면 오른쪽의 실시간 미리보기와 함께 실시간으로 표시됩니다.

바닥글을 사용자 정의할 것이므로 바닥글 옵션을 선택합니다. 바닥글에 대해 변경할 수 있는 다양한 색상 옵션이 표시되며 여기에는 배경, 제목, 텍스트 및 링크의 색상이 포함됩니다.

여기에서 다양한 배경, 제목 및 텍스트 색상을 테스트하여 바닥글에 가장 적합한 조합을 찾을 수 있습니다. 또한 바닥글에 링크가 있는 경우 링크 색상을 가지고 놀 수 있습니다.

전반적으로 바닥글이 눈에 띄고 라이브 미리 보기를 사용하여 웹사이트 디자인의 전체 스타일과 일치하는지 확인하세요. 변경 사항에 만족하면 게시 를 클릭하여 변경 사항을 적용합니다.

1.2. Storefront에서 바닥글 위젯 변경

색상 변경 외에도 바닥글 위젯을 사용자 지정할 수 있습니다. Storefront에서는 2개의 다른 하위 메뉴에서 이를 수행할 수 있습니다. 모양 > 사용자 정의 에서 위젯 탭을 열거나 모양 > 위젯 으로 이동할 수 있습니다.

두 인터페이스 모두 바닥글 위젯을 편집할 수 있지만 변경 사항을 실시간으로 미리 볼 수 있는 테마 사용자 지정 프로그램을 사용하는 것이 좋습니다. 이렇게 하면 변경 사항을 실시간으로 볼 수 있고 바닥글을 편집하는 동안 많은 시간을 절약할 수 있습니다.

선택한 옵션에 관계없이 위젯 아래에서 사용 가능한 모든 위젯 영역을 볼 수 있습니다. Storefront에는 웹사이트에 대한 4개의 바닥글 열이 있으며 다양한 위젯을 추가할 수 있습니다.

편집하려는 열을 선택 하고 위젯 추가 를 클릭하기만 하면 됩니다. 아카이브, 오디오, 이미지, 텍스트, 검색 등과 같이 선택할 수 있는 위젯이 많이 있습니다.

위젯을 선택한 후 선택한 위젯에 따라 몇 가지 세부 정보를 더 편집해야 합니다. 그렇게 하면 완료 를 클릭한 다음 게시 를 클릭하여 바닥글 위젯에 변경 사항을 적용합니다.

그런 다음 동일한 바닥글 열이나 다른 열에 다른 위젯을 추가할 수 있습니다. 하나의 바닥글 열과 여러 바닥글 열에 여러 위젯을 포함할 수 있다는 점은 주목할 가치가 있습니다. 예를 들어, 이 자습서의 경우 바닥글에 간단한 설명, 탐색 메뉴 및 검색 상자를 추가했습니다.

1.3. 테마 편집기를 사용하여 Storefront에서 바닥글 변경

테마 사용자 정의 도구와 위젯에서 거의 모든 것을 편집할 수 있지만 바닥글의 저작권 텍스트를 사용자 정의하려면 테마 편집기를 사용해야 할 수도 있습니다. 이를 위해 사용자 정의 함수의 간단한 코드 스니펫을 추가해야 합니다.

변경하기 전에 하위 테마를 만들고 WordPress 웹 사이트를 백업하여 이러한 파일을 편집해야 합니다. 이 파일은 웹사이트에 대한 중요한 정보를 저장하므로 실수할 경우 웹사이트가 손상될 수 있습니다.

완료되면 Appearance > Theme Editor 로 이동하여 functions.php 파일의 탭을 열고 다음 스니펫을 붙여넣습니다.

 add_action( '초기화', 'custom_remove_footer_credit', 10 );
기능 custom_remove_footer_credit () {
    remove_action( 'storefront_footer', 'storefront_credit', 20 );
    add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}

함수 custom_storefront_credit() {
?>
<div class="사이트 정보">
Quadlayers<?php echo get_bloginfo( 'name' ) . ' ' . get_the_date( 'Y' ); ?>
</div><!– .사이트 정보 –>
<?php
}

이렇게 하면 기본 바닥글 텍스트인 " Builded with Storefront "가 제거되고 웹사이트 세부정보가 추가됩니다. 이 코드를 기본으로 사용하여 웹사이트 세부정보를 표시하도록 조정할 수 있습니다.

2. 플러그인을 사용하여 Storefront에서 바닥글 변경

Storefront에서 바닥글을 편집하는 시간과 추가 작업을 절약하려면 전용 플러그인을 사용하면 됩니다.

Storefront가 다양한 WordPress 플러그인과 호환된다는 것을 알고 있을 것입니다. 하지만 그게 다가 아닙니다. Storefront 테마의 다양한 영역을 사용자 정의하도록 특별히 설계된 플러그인이 있습니다. 최고의 플러그인 중 하나는 Change Storefront Footer Copyright Text입니다. 이름에서 알 수 있듯이 이 도구를 사용하면 Storefront 바닥글의 저작권 텍스트를 편집할 수 있습니다.

이 플러그인을 사용하려면 플러그인을 설치하고 활성화해야 하므로 먼저 플러그인 > 새로 추가 로 이동하여 검색합니다. 그런 다음 지금 설치 를 클릭한 다음 활성화 를 클릭합니다. 문제가 있는 경우 WordPress 플러그인을 수동으로 설치하는 방법을 설명하는 가이드를 살펴보세요.

그런 다음 설정 > 첫 화면 바닥글 로 이동하면 텍스트 편집기를 사용하여 저작권 바닥글에 텍스트나 링크를 추가할 수 있는 옵션이 표시됩니다. 또한 시각적 텍스트 편집기를 사용하여 글꼴 옵션 또는 정렬을 변경하거나 미리 형식이 지정된 텍스트 보기에서 약간의 코드를 작성할 수 있습니다.

원하는 모든 정보를 추가한 후 변경 사항을 저장합니다 . 그런 다음 프런트엔드에서 사이트를 확인하여 변경 사항을 살펴보십시오.

3. 프로그래밍 방식으로 Storefront의 바닥글 변경

코딩 방법을 알고 있다면 Storefront에서 바닥글을 변경하고 사용자 정의하기 위해 할 수 있는 일이 많이 있습니다. 이 섹션에서는 사이트에서 시도할 수 있는 몇 가지 예를 보여 드리겠습니다.

참고: 핵심 파일을 편집하므로 시작하기 전에 사이트 전체를 백업하고 하위 테마를 사용하는 것이 좋습니다. 플러그인을 만드는 방법을 배우거나 이러한 플러그인을 사용하는 방법을 모르는 경우.

3.1. 스토어프론트 크레딧 제거

바닥글에서 스토어프론트 크레딧을 완전히 제거하려면 하위 테마의 functions.php 파일 끝에 다음 스니펫을 추가하기만 하면 됩니다.

 add_action( 'wp', 'ql_remove_credits_storefront' );
기능 ql_remove_credits_storefront () {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
}

3.2. 저작권 텍스트 사용자 정의

이제 바닥글의 저작권 텍스트를 편집하려고 한다고 가정해 보겠습니다. 이를 위해 다음과 같이 Copyright + year + by QuadLayers 라는 새 텍스트 문자열을 만듭니다.

 add_filter( 'storefront_copyright_text', 'ql_customize_storefront_footer_copyright_text' );
기능 ql_customize_storefront_footer_copyright_text () {
$text = '저작권' 날짜( 'Y' ) . 'QuadLayers';
반환 $text;
}

저작권 텍스트를 사용자 정의하기 위해 수행할 수 있는 다른 작업이 많이 있습니다. 이 스크립트를 기본으로 사용하여 필요에 따라 사용자 정의하십시오.

보너스: 바닥글에 Instagram 피드 추가

우리는 이미 Storefront가 최고의 WooCommerce 테마 중 하나라고 언급했으므로 이 튜토리얼을 진행하는 경우 전자 상거래 상점이 있을 가능성이 매우 높습니다. 이 경우 바닥글에 소셜 미디어 옵션을 추가하는 것이 도움이 될 수 있습니다.

이러한 플랫폼을 최대한 활용하는 데 사용할 수 있는 소셜 미디어 플러그인이 많이 있습니다. 이 섹션에서는 Instagram 피드를 추가하여 Storefront에서 바닥글을 변경하는 방법을 보여줍니다. 이렇게 하면 방문자가 사이트에서 직접 Instagram 피드를 보고 방문할 수 있도록 Instagram 피드를 더 잘 보이게 할 수 있습니다.

바닥글에 Instagram 피드를 추가하는 방법

바닥글에 Instagram 피드를 추가하는 가장 간단한 방법은 플러그인을 사용하는 것입니다. 이 데모에서는 소셜 갤러리 피드 (이전에는 Instagram 갤러리 피드 로 알려짐)를 사용합니다. 기본 기능이 포함된 무료 버전과 19 USD(일회성 결제)부터 시작하는 3가지 프리미엄 플랜이 있는 프리미엄 플러그인입니다.

먼저 WordPress 웹 사이트에 플러그인을 설치하고 활성화해야 합니다. 그런 다음 WordPress 대시보드의 소셜 피드 갤러리 메뉴로 이동하여 계정 탭을 엽니다.

여기서 인스타그램 계정을 추가해야 합니다. 개인 계정 또는 비즈니스 계정을 추가할 수 있습니다.

그런 다음 피드 탭으로 이동하여 +피드 를 클릭하여 Instagram 피드를 만듭니다.

여기에서 레이아웃, 표시할 이미지 수 등 피드의 모든 요소를 ​​선택하고 편집할 수 있습니다. 필요한 사항을 모두 변경한 후 저장 을 클릭합니다.

바닥글에 Instagram 피드를 추가하려면 대시보드에서 위젯 메뉴로 이동하거나 모양 > 사용자 지정 으로 이동합니다. 그런 다음 Instagram 피드를 포함할 바닥글 열을 선택하고 소셜 피드 갤러리 위젯을 추가합니다. 피드의 제목과 갤러리 ID를 추가한 후 완료 를 클릭합니다.

또는 피드 탭에 제공된 단축 코드를 사용하여 Instagram 피드를 웹사이트에 추가할 수 있습니다.

마지막으로 프론트엔드에서 사이트를 확인하면 바닥글에서 Instagram 피드를 볼 수 있습니다.

더 많은 대안과 더 자세한 설명은 WordPress를 Instagram과 통합하는 방법에 대한 가이드를 참조하세요.

결론

대체로 사이트의 바닥글을 사용자 지정하면 방문자의 사용자 경험에 정말 도움이 되고 사용자 참여도를 높일 수 있습니다. 이 가이드에서는 Storefront에서 바닥글을 변경할 수 있는 두 가지 방법을 설명했습니다.

• WordPress 관리자 대시보드에서
• 전용 플러그인 사용
• 프로그래밍 방식으로

이 모든 방법은 초보자에게 친숙하며 작업을 완료합니다. WordPress 대시보드에서 텍스트, 배경, 제목 색상과 링크 색상을 변경할 수 있습니다. 반면에 저작권 바닥글 텍스트를 편집하려면 플러그인을 사용해야 합니다. 마지막으로 코딩 기술이 있는 경우 프로그래밍 방식으로 바닥글을 사용자 지정할 수 있습니다.

또한 바닥글에 더 많은 정보를 추가할 수 있습니다. 예를 들어 Instagram 피드와 링크를 포함하여 소셜 미디어 인지도를 높일 수 있습니다. 테마에서 바닥글을 변경하는 방법에 대한 자세한 내용은 WordPress에서 바닥글을 편집하는 방법에 대한 가이드를 참조하세요.

Storefront에서 바닥글을 편집했습니까? 어떤 방법을 사용하셨나요? 추가해야 할 다른 옵션이 있습니까? 아래 의견에 알려주십시오.

이 가이드가 유용했다면 다음 기사도 관심을 가질 것입니다.

• WordPress에서 헤더를 편집하는 방법
• WordPress용 최고의 Instagram 피드 플러그인
• WooCommerce를 위한 최고의 플러그인(무료+유료)