워드프레스 Onepress 테마 footer 텍스트를 원하는 내용으로 변경하는 방법

워드프레스 Onepress 테마의 유료 버전은 대부분의 설정을 변경할 수 있지만, 무료 버전은 그렇지 않습니다. 그중에서도 특히, 페이지 하단의 footer 텍스트가 마음에 들지 않는 경우가 있는데요, 이 글에서 Onepress 무료 테마의 footer 텍스트를 원하는 내용으로 변경하는 방법을 알아보겠습니다.

워드프레스 Onepress 테마 footer 텍스트를 원하는 내용으로 변경하는 방법

아래 화면은 제가 사용하고 있는 워드프레스 Onepress 무료 테마의 footer 내용입니다. 사실 크게 거슬리지 않아 지금까지 그대로 두었다가, 이번에 원하는 텍스트로 변경하였습니다. 이 글에서는 자바스크립트를 활용하여 Oneperss 무료 테마 footer 텍스트를 원하는 내용으로 변경하는 방법에 대해 알아보겠습니다.

Onepress 무료 테마의 Footer 텍스트를 어떤 내용으로 변경할지 고민하다가, 꾸준히 힘내자는 의미에서 “올해도 벌써 56일째, 남은 310일도 힘내세요” 로 변경하였습니다. 그런데 막상 이렇게 바꾸고 나니 뭔가 어색한 느낌이 들어 아마도 얼마 지나지 않아 다른 텍스트로 변경하게 될 것 같습니다.

Onepress 테마 footer 텍스트를 원하는 내용으로 변경한 화면입니다

저와 같은 내용으로 footer의 텍스트를 변경하기 위해서는, 먼저 오늘 날짜를 기준으로 올해 몇 일이 지났고, 몇 일이 남았는지 계산해야 합니다.

자바스크립트를 활용해서 쉽게 계산할 수 있습니다.

    // 현재 날짜와 연도를 구합니다.
    const now = new Date();
    const year = now.getFullYear();

    // 올해의 첫날과 마지막 날을 설정합니다.
    const startOfYear = new Date(year, 0, 1);
    const endOfYear = new Date(year, 11, 31);

    // 오늘까지 경과한 일수와 올해의 마지막 날까지 남은 일수를 계산합니다.
    const dayOfYear = Math.ceil((now - startOfYear) / (1000 * 60 * 60 * 24));
    const remainingDays = Math.ceil((endOfYear - now) / (1000 * 60 * 60 * 24));

다음으로 footer 의 텍스트 내용을 변경하려면 footer의 class 이름을 알아야 합니다. 개발자 도구로 확인해 보니 class 이름이 ‘site-info’ 라는 것을 확인하였습니다.

아래는 ‘site-info’ 의 텍스트 내용을 위의 날짜 계산을 포함하여 제가 원하는 텍스트로 변경하는 코드입니다.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 현재 날짜와 연도를 구합니다.
    const now = new Date();
    const year = now.getFullYear();

    // 올해의 첫날과 마지막 날을 설정합니다.
    const startOfYear = new Date(year, 0, 1);
    const endOfYear = new Date(year, 11, 31);

    // 오늘까지 경과한 일수와 올해의 마지막 날까지 남은 일수를 계산합니다.
    const dayOfYear = Math.ceil((now - startOfYear) / (1000 * 60 * 60 * 24));
    const remainingDays = Math.ceil((endOfYear - now) / (1000 * 60 * 60 * 24));

    // 'site-info' 클래스를 가진 요소를 찾아 내용을 변경합니다.
    var footerText = document.querySelector('.site-info');
    if (footerText) {
        footerText.innerHTML = `Copyright © ${year} 지식버그-ZISIKBUG - 올해도 벌써 ${dayOfYear}일째, 남은 ${remainingDays}일도 힘내세요` + 
        '<div class="btt">' + 
            '<a class="back-to-top" href="#page" title="상단으로 가기">' + 
                '<i class="fa fa-angle-double-up wow flash" data-wow-duration="2s" style="visibility: visible; animation-duration: 2s; animation-name: flash;"></i>' + 
            '</a>' + 
        '</div>';
    }
});
</script>

footer의 내용을 여러분이 원하는 텍스트로 변경하려면, 다른 것은 그대로 두시고 아래 코드에서 이탤릭체로 되어 있는 ` ` 안의 텍스트를 수정하시면 됩니다.

footerText.innerHTML = `Copyright © ${year} 지식버그-ZISIKBUG - 올해도 벌써 ${dayOfYear}일째, 남은 ${remainingDays}일도 힘내세요`

수정된 코드를 복사한 뒤, Head & Footer 의 ‘HEAD Code’에 아래 그림과 같이 붙여넣기 하고, 아래로 스크롤 하여 ‘변경사항 저장’을 클릭하면 바로 적용됩니다.

Head & Footer 사용방법은 아래 링크에서 확인하실 수 있습니다.

Head & Footer 사용방법 알아보기

아래 그림은 위의 자바스크립트를 반영한 결과이며, 제가 원하는 데로 footer의 내용이 변경되었습니다.

Oenpress 무료 테마 footer 텍스트를 원하는 내용으로 변경한 최종 결과입니다. 원하는 데로 내용에 오늘 날짜 기준으로 경과일수 및 남은 일수가 표시됩니다

오늘은 워드프레스 Onepress 테마 footer 텍스트를 원하는 내용으로 변경하는 방법을 알아보았습니다. footer 텍스트를 변경하고 싶으신 분들은 이 글을 참고하여 적용해 보시기 바랍니다.