Safe SVG

Safe SVG 플러그인 소개

Safe SVG는 워드프레스에서 SVG 파일을 안전하게 업로드하고 사용할 수 있도록 도와주는 플러그인입니다. 기본적으로 워드프레스는 보안 문제로 인해 SVG 파일 업로드를 허용하지 않지만, Safe SVG를 사용하면 보안 필터링을 적용하면서도 SVG 파일을 미디어 라이브러리를 통해 관리할 수 있습니다.

주요 기능

  1. SVG 파일 업로드 활성화
    Safe SVG를 설치하면 별도의 코드 수정 없이 워드프레스 미디어 라이브러리를 통해 SVG 파일을 업로드할 수 있습니다.
  2. 자동 보안 필터링
    SVG 파일은 XML 기반이므로 악성 코드 삽입이 가능하지만, Safe SVG는 업로드 시 자동으로 파일을 정리하고 보안 위험을 줄이는 기능을 제공합니다.
  3. 미디어 라이브러리 미리보기 지원
    기본적으로 워드프레스에서는 SVG 파일의 미리보기가 제공되지 않지만, Safe SVG를 사용하면 미디어 라이브러리에서 SVG 이미지를 직접 확인할 수 있습니다.
  4. 간편한 사용법
    플러그인을 설치하고 활성화하는 것만으로 자동으로 적용되므로 별도의 설정이 필요하지 않습니다.

설치 및 사용 방법

  1. 워드프레스 관리자 페이지에서 플러그인 → 새로 추가로 이동합니다.
  2. 검색창에 Safe SVG를 입력한 후 설치하고 활성화합니다.
  3. 이제 미디어 라이브러리에서 SVG 파일을 업로드할 수 있습니다.

사이트 제작 방향성

홈페이지 제작을 목적으로 블로그를 운영하면서 고객을 유치하려면, 잠재 고객이 궁금해하는 정보전문성을 보여줄 수 있는 콘텐츠를 작성하는 것이 중요합니다.

💡 핵심 전략:


🔥 고객 유치를 위한 블로그 콘텐츠 아이디어

1️⃣ 홈페이지 제작 가이드 & 트렌드

“홈페이지를 만들 때 꼭 알아야 할 5가지”
“2024년 최신 웹사이트 디자인 트렌드”
“무료 홈페이지 vs. 맞춤 제작, 어떤 게 더 좋을까?”
“반응형 웹사이트란? 모바일 최적화가 중요한 이유”
“비즈니스 성공을 위한 홈페이지 유형별 추천”

🔹 고객이 궁금해하는 질문을 해결하는 콘텐츠를 제공하면 신뢰도가 올라갑니다.


2️⃣ 홈페이지 제작 과정 & 견적 관련 글

“홈페이지 제작 비용, 얼마나 들까요?”
“워드프레스 vs. 자체 개발, 어떤 게 좋을까?”
“홈페이지 제작 기간은 얼마나 걸릴까?”
“저렴하게 홈페이지 만들 수 있는 방법”
“홈페이지 유지보수, 직접 할 수 있을까?”

🔹 비용 & 유지보수에 대한 정보를 제공하면 고객이 부담 없이 문의할 가능성이 높아집니다.


3️⃣ 홈페이지 제작 사례 & 포트폴리오 소개

“실제 클라이언트 홈페이지 제작 사례 – OOO 회사”
“이런 웹사이트가 고객을 끌어당깁니다! (포트폴리오 공유)”
“우리 회사에 맞는 홈페이지는 어떤 형태일까?”
“쇼핑몰, 기업 홈페이지, 포트폴리오 사이트 비교”

🔹 포트폴리오를 통해 신뢰를 형성하고, “나도 이런 홈페이지 만들고 싶다!”라는 생각을 유도할 수 있습니다.


4️⃣ SEO & 마케팅 관련 글 (고객 유입 유도)

“홈페이지에 방문자를 늘리는 SEO 기본 전략”
“구글에서 내 홈페이지가 검색되지 않는 이유”
“검색엔진 상위 노출을 위한 블로그 운영법”
“홈페이지 트래픽을 늘리는 SNS 활용법”
“홈페이지를 만들었는데 방문자가 없어요! 해결 방법”

🔹 홈페이지 제작뿐만 아니라, 운영 & 마케팅까지 제공할 수 있다는 점을 강조하세요.


5️⃣ 홈페이지 필수 기능 & 유지보수 팁

“홈페이지에 꼭 필요한 기능 TOP 5”
“문의폼(견적 요청) 어떻게 만들어야 전환율이 높을까?”
“빠른 홈페이지 로딩 속도를 위한 최적화 방법”
“워드프레스 플러그인 추천 (보안, SEO, 속도 최적화)”
“홈페이지가 다운될 때 대처하는 방법”

🔹 고객이 쉽게 이해할 수 있는 유지보수 팁을 제공하면, 장기적인 고객 관계를 형성할 수 있습니다.


6️⃣ 웹사이트 제작과 관련된 트렌드 & 뉴스

“구글이 선호하는 웹사이트 구조는?”
“인공지능(AI) 웹사이트 제작, 정말 효과적일까?”
“2024년 웹사이트 디자인 트렌드 분석”
“모바일 UX/UI 디자인, 왜 중요할까?”

🔹 최신 트렌드를 다루면 전문가로서의 신뢰도가 높아집니다.


💡 고객 문의를 유도하는 방법

1️⃣ 블로그 글 마지막에 CTA(Call to Action) 추가

2️⃣ 고객 후기 & 성공 사례 강조

3️⃣ 무료 가이드북 제공


🚀 결론: 블로그 운영 전략

검색 유입: 고객이 자주 검색하는 키워드를 활용한 블로그 글 작성
전문성 강조: 제작 사례, 트렌드, 기능 설명으로 신뢰 구축
문의 유도: 블로그에서 바로 상담 신청 & 견적 요청 가능하도록 유도
SNS 활용: 블로그 콘텐츠를 인스타그램, 페이스북, 링크드인 등과 연계

💎 지속적으로 블로그를 운영하면, 자연스럽게 홈페이지 제작 문의가 늘어날 것입니다!

Nav Menu Roles

Nav Menu Roles는 워드프레스 플러그인으로, 네비게이션 메뉴 항목의 표시 여부를 특정 사용자 역할(User Roles)에 따라 제어할 수 있는 기능을 제공합니다. 이 플러그인을 사용하면 메뉴 항목을 로그인한 사용자, 로그아웃한 사용자, 또는 특정 사용자 역할에게만 표시하도록 설정할 수 있습니다. 이를 통해 웹사이트의 사용자 경험을 개선하고, 각 사용자 그룹에 맞는 맞춤형 메뉴를 제공할 수 있습니다.

주요 기능

  1. 사용자 역할 기반 제어:
    • 관리자, 편집자, 구독자 등 특정 역할별로 메뉴를 표시하거나 숨길 수 있음.
  2. 로그인 상태별 표시:
    • 로그인 여부에 따라 메뉴를 표시하거나 숨길 수 있음.
  3. 다양한 테마와 호환:
    • 대부분의 워드프레스 테마에서 문제없이 작동.

Cool Timeline (Horizontal & Vertical Timeline)

Cool Timeline는 웹사이트에서 시간의 흐름에 따라 이벤트, 프로젝트, 기록 등을 시각적으로 표현하기 위한 플러그인입니다. 수평 및 수직 타임라인 형식으로 데이터를 아름답게 표시하며, 특히 WordPress 사용자에게 유용합니다. 주요 기능과 활용 방식을 정리하면 다음과 같습니다.

  1. 수직 및 수평 타임라인
    • 수직 타임라인: 연대기, 이벤트 기록, 회사 역사 등을 세로로 나열.
    • 수평 타임라인: 간결하고 넓은 공간에 적합하며, 프레젠테이션이나 짧은 이벤트 목록에 유용.
  2. 응답형 디자인
    • 모바일, 태블릿, 데스크톱에서 최적화된 뷰를 제공.
  3. 다양한 사용자 설정
    • 색상, 아이콘, 타임라인 레이아웃, 애니메이션 효과 등을 사용자 정의 가능.
  4. 멀티미디어 지원
    • 텍스트와 함께 이미지, 동영상, 아이콘 등을 포함하여 시각적 요소 강화.
  5. 연대순 정렬
    • 과거에서 현재 또는 현재에서 과거로 시간순으로 정렬 가능.
  6. 다국어 지원
    • 다국어 웹사이트에서도 활용 가능하며 WPML 및 Polylang 같은 플러그인과 호환.

Elementor

Elementor는 WordPress 웹사이트 빌더 플러그인으로, 코딩 없이도 직관적인 드래그 앤 드롭 인터페이스를 통해 웹페이지를 디자인할 수 있도록 도와줍니다. 디자이너와 개발자가 아닌 일반 사용자도 쉽게 사용할 수 있도록 설계된 도구입니다.

주요 특징

  1. 드래그 앤 드롭 인터페이스
    • 화면에서 원하는 요소를 드래그해 배치하고 바로 수정할 수 있어 코딩 지식 없이도 디자인 가능.
  2. 실시간 미리보기
    • 편집과 동시에 결과를 확인할 수 있어 반복 작업 없이 빠르게 작업 가능.
  3. 반응형 디자인 지원
    • 데스크톱, 태블릿, 모바일 뷰를 별도로 설정해 모든 기기에 최적화된 디자인 제작 가능.
  4. 다양한 위젯 제공
    • 텍스트, 이미지, 버튼, 슬라이더, 폼, 아이콘 등 수백 가지의 위젯을 포함.
  5. 템플릿과 블록
    • 사전 제작된 템플릿과 블록을 활용하여 디자인 시간을 절약할 수 있음.
  6. 강력한 확장성
    • 서드파티 플러그인과 통합이 쉬워 기능 확장이 가능.

Optimized1

PageSpeed Insights 고점을 보장하는, 수작업으로 최적화된 고품질 맞춤형 테마

카테고리 목록 네비게이션 만들기

카테고리에서 게시글을 불러올 때 하단에 페이지 네비게이션이 필요합니다.
일정 게시물 수를 초과하면 페이지를 넘기며 게시물을 노출하기 위함입니다.
여기서는 이를 추가하는 방법을 알아보겠습니다.

category.php

<!-- 네비게이션 추가 -->
            <div class="pagination">
                <?php
                echo paginate_links(array(
                    'total' => $query->max_num_pages,
                    'current' => max(1, get_query_var('paged')),
                    'format' => '?paged=%#%',
                    'show_all' => false,
                    'type' => 'plain',
                    'end_size' => 2,
                    'mid_size' => 1,
                    'prev_next' => true,
                    'prev_text' => __('« Prev', 'your-text-domain'),
                    'next_text' => __('Next »', 'your-text-domain'),
                ));
                ?>
            </div>

카테고리 썸네일 포함 목록 불러오기

category.php

 <?php
            // 카테고리별 포스트를 가져오는 루프
            if (have_posts()) :
                while (have_posts()) : the_post(); ?>
                    <article>
                    <?php if (has_post_thumbnail()) : ?>
                            <div class="post-thumbnail">
                                <a href="<?php the_permalink(); ?>">
                                    <?php the_post_thumbnail('medium'); // 중간 크기 ?>
                                </a>
                            </div>
                        <?php endif; ?>
                        <h2><?php the_title(); ?></h2>
                        <div><?php the_excerpt(); ?></div>
                        <a href="<?php the_permalink(); ?>">더 읽기</a>
                    </article>
                <?php endwhile;
            else :
                echo '<p>이 카테고리에 게시물이 없습니다.</p>';
            endif;
            ?>

위 코드 기준으로, 카테고리를 불러오는 곳에 입력하면 썸네일을 포함한 블로그 목록을 불러옵니다.

삼성전자 반도체

https://www.gdweb.co.kr/sub/view.asp?Txt_fgbn=5&str_no=19538

*주요 제품과 최신 뉴스의 배열 방법

현대웰니스

https://www.gdweb.co.kr/sub/view.asp?displayrow=60&Txt_key=all&Txt_word=&Txt_agnumber=&Txt_fgbn=5&Txt_bcode1=022310001&Txt_gbflag=&Txt_bcode2=&Txt_bcode3=&Txt_bcode4=&Txt_bcode5=&Page=1&str_no=2187

카테고리 상단 이미지 만들기

카테고리별 상단 이미지(헤더 하단에 큰 배경 이미지와 텍스트 처리)가 필요한 경우가 회사 사이트에서 자주 있습니다.
이를 처리하는 방법을 알아보겠습니다.


functions.php

// 카테고리 편집 페이지에 배경 이미지 필드 추가
function add_category_background_image_field($taxonomy) {
    ?>
    <div class="form-field term-group">
        <label for="category-background-image"><?php _e('배경 이미지', 'text-domain'); ?></label>
        <input type="text" id="category-background-image" name="category-background-image" value="">
        <button class="upload_image_button button"><?php _e('이미지 업로드', 'text-domain'); ?></button>
    </div>
    <?php
}
add_action('category_add_form_fields', 'add_category_background_image_field', 10, 2);

// 카테고리 편집 페이지에서 배경 이미지 필드 저장
function save_category_background_image($term_id) {
    if (isset($_POST['category-background-image'])) {
        update_term_meta($term_id, 'category-background-image', $_POST['category-background-image']);
    }
}
add_action('created_category', 'save_category_background_image', 10, 2);
add_action('edited_category', 'save_category_background_image', 10, 2);

// 카테고리 편집 페이지에 배경 이미지 필드 표시
function edit_category_background_image_field($term, $taxonomy) {
    $background_image = get_term_meta($term->term_id, 'category-background-image', true);
    ?>
    <tr class="form-field term-group-wrap">
        <th scope="row"><label for="category-background-image"><?php _e('배경 이미지', 'text-domain'); ?></label></th>
        <td>
            <input type="text" id="category-background-image" name="category-background-image" value="<?php echo esc_attr($background_image); ?>" style="display:none;">
            <button class="upload_image_button button"><?php _e('이미지 업로드', 'text-domain'); ?></button>
            <div id="category-image-preview" style="margin-top:10px;">
                <?php if ($background_image) : ?>
                    <img src="<?php echo esc_url($background_image); ?>" style="max-width:100%; height:auto;">
                <?php endif; ?>
            </div>
        </td>
    </tr>
    <?php
}
add_action('category_edit_form_fields', 'edit_category_background_image_field', 10, 2);

// 이미지 업로드를 위한 스크립트 추가
function add_category_image_upload_script() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        var mediaUploader;
        $('.upload_image_button').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: '이미지 선택',
                button: {
                    text: '이미지 선택'
                },
                multiple: false
            });
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                $('#category-background-image').val(attachment.url);
            });
            mediaUploader.open();
        });
    });
    </script>
    <?php
}
add_action('admin_footer', 'add_category_image_upload_script');

// 미디어 업로드 스크립트 로드
function load_wp_media_files() {
    wp_enqueue_media();
}
add_action('admin_enqueue_scripts', 'load_wp_media_files');

functions.php 에 위 코드를 추가하면 하단과 같은 카테고리 배경 이미지 등록칸이 나옵니다.


category.php

<?php
    // 현재 카테고리의 배경 이미지 가져오기
    $category = get_queried_object();
    $background_image = get_term_meta($category->term_id, 'category-background-image', true);
 ?>
    <div class="blog-top" style="background-image: url('<?php echo esc_url($background_image); ?>');">
        <div class="root-container">
            <h1><?php single_cat_title(); ?></h1>
            <?php if (category_description()) : ?>
                <div class="category-description">
                    <?php echo category_description(); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

와 같이 catregory.php에 코드를 추가하면 원하는 공간에서 배경이미지와 카테고리명 그리고 설명을 노출 할 수 있습니다.

Translate WordPress with GTranslate

GTranslate는 워드프레스에서 손쉽게 다국어 웹사이트를 구현할 수 있도록 돕는 강력한 플러그인입니다. Google 번역 엔진을 활용해 기술적인 지식 없이도 다양한 언어로 콘텐츠를 번역할 수 있어, 누구나 쉽게 다국어 사이트를 운영할 수 있습니다.

자동 번역

SEO 친화적

사용자 정의 가능한 언어 전환기

수동 번역 옵션

높은 호환성