Safe SVG
Safe SVG 플러그인 소개
Safe SVG는 워드프레스에서 SVG 파일을 안전하게 업로드하고 사용할 수 있도록 도와주는 플러그인입니다. 기본적으로 워드프레스는 보안 문제로 인해 SVG 파일 업로드를 허용하지 않지만, Safe SVG를 사용하면 보안 필터링을 적용하면서도 SVG 파일을 미디어 라이브러리를 통해 관리할 수 있습니다.
주요 기능
- SVG 파일 업로드 활성화
Safe SVG를 설치하면 별도의 코드 수정 없이 워드프레스 미디어 라이브러리를 통해 SVG 파일을 업로드할 수 있습니다. - 자동 보안 필터링
SVG 파일은 XML 기반이므로 악성 코드 삽입이 가능하지만, Safe SVG는 업로드 시 자동으로 파일을 정리하고 보안 위험을 줄이는 기능을 제공합니다. - 미디어 라이브러리 미리보기 지원
기본적으로 워드프레스에서는 SVG 파일의 미리보기가 제공되지 않지만, Safe SVG를 사용하면 미디어 라이브러리에서 SVG 이미지를 직접 확인할 수 있습니다. - 간편한 사용법
플러그인을 설치하고 활성화하는 것만으로 자동으로 적용되므로 별도의 설정이 필요하지 않습니다.
설치 및 사용 방법
- 워드프레스 관리자 페이지에서 플러그인 → 새로 추가로 이동합니다.
- 검색창에 Safe SVG를 입력한 후 설치하고 활성화합니다.
- 이제 미디어 라이브러리에서 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️⃣ 고객 후기 & 성공 사례 강조
- “우리 고객들은 어떻게 변했을까? 직접 확인해보세요!”
- “○○업체, 홈페이지 리뉴얼 후 매출 2배 상승!”
3️⃣ 무료 가이드북 제공
- “홈페이지 제작 가이드북 무료 다운로드”
- “SEO 최적화 체크리스트 제공 (이메일 등록 유도)”
🚀 결론: 블로그 운영 전략
✅ 검색 유입: 고객이 자주 검색하는 키워드를 활용한 블로그 글 작성
✅ 전문성 강조: 제작 사례, 트렌드, 기능 설명으로 신뢰 구축
✅ 문의 유도: 블로그에서 바로 상담 신청 & 견적 요청 가능하도록 유도
✅ SNS 활용: 블로그 콘텐츠를 인스타그램, 페이스북, 링크드인 등과 연계
💎 지속적으로 블로그를 운영하면, 자연스럽게 홈페이지 제작 문의가 늘어날 것입니다!
Nav Menu Roles
Nav Menu Roles는 워드프레스 플러그인으로, 네비게이션 메뉴 항목의 표시 여부를 특정 사용자 역할(User Roles)에 따라 제어할 수 있는 기능을 제공합니다. 이 플러그인을 사용하면 메뉴 항목을 로그인한 사용자, 로그아웃한 사용자, 또는 특정 사용자 역할에게만 표시하도록 설정할 수 있습니다. 이를 통해 웹사이트의 사용자 경험을 개선하고, 각 사용자 그룹에 맞는 맞춤형 메뉴를 제공할 수 있습니다.
주요 기능
- 사용자 역할 기반 제어:
- 관리자, 편집자, 구독자 등 특정 역할별로 메뉴를 표시하거나 숨길 수 있음.
- 로그인 상태별 표시:
- 로그인 여부에 따라 메뉴를 표시하거나 숨길 수 있음.
- 다양한 테마와 호환:
- 대부분의 워드프레스 테마에서 문제없이 작동.

Cool Timeline (Horizontal & Vertical Timeline)
Cool Timeline는 웹사이트에서 시간의 흐름에 따라 이벤트, 프로젝트, 기록 등을 시각적으로 표현하기 위한 플러그인입니다. 수평 및 수직 타임라인 형식으로 데이터를 아름답게 표시하며, 특히 WordPress 사용자에게 유용합니다. 주요 기능과 활용 방식을 정리하면 다음과 같습니다.
- 수직 및 수평 타임라인
- 수직 타임라인: 연대기, 이벤트 기록, 회사 역사 등을 세로로 나열.
- 수평 타임라인: 간결하고 넓은 공간에 적합하며, 프레젠테이션이나 짧은 이벤트 목록에 유용.
- 응답형 디자인
- 모바일, 태블릿, 데스크톱에서 최적화된 뷰를 제공.
- 다양한 사용자 설정
- 색상, 아이콘, 타임라인 레이아웃, 애니메이션 효과 등을 사용자 정의 가능.
- 멀티미디어 지원
- 텍스트와 함께 이미지, 동영상, 아이콘 등을 포함하여 시각적 요소 강화.
- 연대순 정렬
- 과거에서 현재 또는 현재에서 과거로 시간순으로 정렬 가능.
- 다국어 지원
- 다국어 웹사이트에서도 활용 가능하며 WPML 및 Polylang 같은 플러그인과 호환.

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

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
*주요 제품과 최신 뉴스의 배열 방법

현대웰니스
- 배경과 라운드 처리

카테고리 상단 이미지 만들기
카테고리별 상단 이미지(헤더 하단에 큰 배경 이미지와 텍스트 처리)가 필요한 경우가 회사 사이트에서 자주 있습니다.
이를 처리하는 방법을 알아보겠습니다.
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 번역 엔진을 활용해 기술적인 지식 없이도 다양한 언어로 콘텐츠를 번역할 수 있어, 누구나 쉽게 다국어 사이트를 운영할 수 있습니다.
자동 번역
- GTranslate는 Google 번역 엔진을 사용해 웹사이트 콘텐츠를 즉시 번역합니다.
- 100개 이상의 언어를 지원해 전 세계 다양한 사용자와의 소통이 가능합니다.
SEO 친화적
- 언어별 URL 구조를 생성하여 검색 엔진이 다국어 페이지를 인덱싱할 수 있게 합니다.
- 예: 프랑스어 페이지는
/fr/
로 표시되어 지역 검색 순위를 높입니다.
사용자 정의 가능한 언어 전환기
- 사이트 디자인에 맞게 스타일링할 수 있는 언어 전환기를 제공합니다.
- 방문자가 원하는 언어로 원활하게 전환할 수 있습니다.
수동 번역 옵션
- 자동 번역 외에도 수동으로 번역 내용을 수정할 수 있어 더욱 정확한 번역이 가능합니다.
높은 호환성
- 대부분의 워드프레스 테마 및 플러그인, 특히 WooCommerce와도 완벽하게 호환됩니다.
