WordPress에서 HTML을 잘 활용하는 방법

블로거

 

WordPress에서 HTML을 잘 활용하는 방법

WordPress에서 HTML을 활용하면 기본적인 블록 에디터를 넘어 더 정교하게 콘텐츠를 구성하거나 맞춤형 디자인을 적용할 수 있습니다. HTML을 사용하여 더 많은 커스터마이징을 할 수 있습니다.

1. HTML 편집 모드 활용

WordPress의 기본 에디터(구텐베르크 블록 에디터)에서 각 블록의 HTML 코드를 직접 수정할 수 있습니다.

• 블록 단위 HTML 수정: 특정 블록을 선택한 후, 블록의 옵션 메뉴(세 개의 점)를 클릭하고 “HTML로 편집”을 선택하면 해당 블록의 HTML 코드를 직접 수정할 수 있습니다.
• 전체 페이지 HTML 수정: 페이지나 게시물 전체의 HTML을 수정하려면, 우측 상단의 세 개의 점을 클릭한 후 "코드 편집기"를 선택하면 됩니다.

2. HTML을 활용한 콘텐츠 디자인

HTML을 사용하면 기본 블록 편집기로는 어려운 다양한 콘텐츠 레이아웃을 만들 수 있습니다.

• HTML로 테이블 삽입:

                <table>
                    <tr>
                        <th>제목 1</th>
                        <th>제목 2</th>
                    </tr>
                    <tr>
                        <td>내용 1</td>
                        <td>내용 2</td>
                    </tr>
                </table>
            

• 이미지와 텍스트 정렬: HTML과 CSS를 함께 사용하여 이미지와 텍스트를 정렬하거나 커스텀 스타일을 적용할 수 있습니다.

                <div style="float:left; margin-right: 10px;">
                    <img src="이미지 URL" alt="설명" width="150">
                </div>
                <p>이 문장은 이미지 옆에 표시됩니다.</p>
            

3. 임베딩 콘텐츠

HTML 태그를 사용하면 외부 콘텐츠(동영상, 소셜 미디어 포스트 등)를 더 자유롭게 임베드할 수 있습니다.

• 유튜브 동영상 임베드:

                <iframe width="560" height="315" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>
            

• 트위터, 인스타그램 포스트 임베드: HTML로 직접 삽입하여 더 세밀한 조정이 가능합니다.

4. 커스텀 HTML 위젯 사용

WordPress에서는 HTML 위젯을 사용하여 사이드바나 푸터 등에 HTML 코드를 삽입할 수 있습니다.

• HTML 위젯 추가: WordPress 대시보드에서 외모 > 위젯으로 이동한 후, "커스텀 HTML" 위젯을 선택하여 원하는 영역에 추가할 수 있습니다.
• 예시: 사이드바에 광고 배너를 삽입하고 싶다면, HTML 위젯을 사용하여 배너 코드를 삽입할 수 있습니다.

                <a href="https://example.com">
                    <img src="배너 이미지 URL" alt="배너 설명" />
                </a>
            

5. CSS와 연동한 디자인 커스터마이징

HTML을 사용할 때 CSS와 함께 활용하면 WordPress의 기본 테마에 의존하지 않고 자유롭게 디자인을 조정할 수 있습니다.

• 인라인 스타일 적용:

                <p style="color: blue; font-size: 20px;">이 문장은 파란색이고 크기가 큽니다.</p>
            

• CSS 파일 연동: WordPress에서 테마의 CSS 파일에 스타일을 추가하거나, 커스텀 CSS 플러그인을 사용하여 HTML과 연동된 CSS 코드를 작성할 수 있습니다.

6. 플러그인을 활용한 HTML 확장

HTML을 더 확장해서 사용하고 싶을 때 플러그인을 활용할 수 있습니다. 예를 들어, Code Snippets 같은 플러그인을 사용하여 코드 조각을 쉽게 삽입하고 관리할 수 있습니다.

7. SEO에 유리한 HTML 태그 사용

HTML 태그는 SEO에 큰 영향을 미칩니다. 콘텐츠 구조를 이해하고 적절한 태그를 사용하면 검색 엔진이 페이지를 더 잘 인식할 수 있습니다.

• 헤딩 태그: <h1>, <h2>, <h3> 태그는 문서의 구조를 나누는 데 사용되며, 중요한 키워드가 포함된 헤딩은 SEO에 긍정적인 영향을 줍니다.
• 메타 태그: <meta> 태그를 통해 페이지의 설명과 키워드를 추가할 수 있습니다.

                <meta name="description" content="이 페이지에 대한 설명" />
                <meta name="keywords" content="키워드1, 키워드2" />
            

8. 단축 코드(Shortcode)와 함께 사용

WordPress에서는 단축 코드(Shortcode)를 통해 HTML을 간결하게 사용할 수 있습니다. 특정 HTML 코드를 여러 게시물에서 반복적으로 사용해야 한다면, 이를 단축 코드로 변환하여 쉽게 관리할 수 있습니다.

            function custom_banner_shortcode() {
                return '<a href="https://example.com"><img src="배너 이미지 URL" alt="배너 설명" /></a>';
            }
            add_shortcode('banner', 'custom_banner_shortcode');
        

그리고 페이지나 포스트에서 [banner]라고 입력하면 해당 HTML 코드가 자동으로 삽입됩니다.