Oh Hyun, DoorWeb의 작성자 - 2 중 2 번째 페이지

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

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 번역 엔진을 활용해 기술적인 지식 없이도 다양한 언어로 콘텐츠를 번역할 수 있어, 누구나 쉽게 다국어 사이트를 운영할 수 있습니다.

자동 번역

GTranslate는 Google 번역 엔진을 사용해 웹사이트 콘텐츠를 즉시 번역합니다.
100개 이상의 언어를 지원해 전 세계 다양한 사용자와의 소통이 가능합니다.

SEO 친화적

언어별 URL 구조를 생성하여 검색 엔진이 다국어 페이지를 인덱싱할 수 있게 합니다.
예: 프랑스어 페이지는 /fr/로 표시되어 지역 검색 순위를 높입니다.

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

사이트 디자인에 맞게 스타일링할 수 있는 언어 전환기를 제공합니다.
방문자가 원하는 언어로 원활하게 전환할 수 있습니다.

수동 번역 옵션

자동 번역 외에도 수동으로 번역 내용을 수정할 수 있어 더욱 정확한 번역이 가능합니다.

높은 호환성

대부분의 워드프레스 테마 및 플러그인, 특히 WooCommerce와도 완벽하게 호환됩니다.

Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF)는 워드프레스에서 사용자 정의 필드를 쉽게 추가하고 관리할 수 있게 도와주는 매우 인기 있는 플러그인입니다. ACF를 사용하면 워드프레스 사이트에 보다 유연하고 구조적인 콘텐츠를 추가할 수 있습니다. 기본적으로 ACF는 포스트, 페이지, 사용자 프로필 등 다양한 콘텐츠 유형에 사용자 정의 필드를 추가할 수 있게 해줍니다.

Yoast SEO

Yoast SEO는 워드프레스에서 가장 인기 있는 SEO(검색 엔진 최적화) 플러그인 중 하나입니다. 이 플러그인은 웹사이트가 검색 엔진에서 더 잘 노출되도록 도와주는 다양한 기능을 제공합니다.

워드프레스 기본폴더 만들기 – 2

E, Rhymix, 그리고 그누보드 모두 스킨이나 테마를 만들 때는 기본 테마나 스킨을 활용하는 것이 작업하기에 편리합니다.
하지만 불필요한 군더더기 없이 꼭 필요한 내용만 담긴 테마나 스킨을 찾기가 쉽지 않았습니다.

그래서 구글링을 하면서, 다른 사람들도 활용할 수 있는 기본 테마를 직접 만들어 보았습니다.
파일 구성은 basictheme 라는 폴더명에 style.css, functions.php, index.php, header.php, footer.php, sidebar.php 파일로 이루어져 있습니다.

style.css

/*
Theme Name: Basic Theme
Theme URI: https://doorweb.net/
Author: Your Name
Author URI: https://doorweb.net/
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basictheme
*/

funtion.php

<?php
function basictheme_setup() {
    // 테마 지원 추가
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo');

    // 메뉴 등록
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'basictheme'),
    ));
}

add_action('after_setup_theme', 'basictheme_setup');

function basictheme_enqueue_styles() {
    wp_enqueue_style('basictheme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'basictheme_enqueue_styles');

index.php

<?php get_header(); ?>

<div id="content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title('<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found</p>';
    endif;
    ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <nav>
            <?php
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'menu_class' => 'nav-menu',
            ));
            ?>
        </nav>
    </header>

footer.php

<footer>
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

sidebar.php

<aside>
    <?php if (is_active_sidebar('main-sidebar')) : ?>
        <?php dynamic_sidebar('main-sidebar'); ?>
    <?php endif; ?>
</aside>

테마 다운로드

basictheme 다운로드

Regenerate Thumbnails

썸네일 크기를 다시 조정해야 할 때 유용하게 활용할 수 있는 플러그인입니다

참고 사이트

Elementor #3176

워드프레스 기본폴더 만들기 – 1

워드프레스를 활용해 일반적인 사이트를 제작하려는 경우, 기존에 판매되는 유료 테마를 사용하는 것을 추천드립니다. 저도 보통 Astra라는 유료 테마를 사용해 사이트를 제작하는데요, 이 테마의 장점은 제작 과정이 쉽고, 어느 정도 빠른 속도를 보장해 준다는 점입니다.

다만, 홈페이지 제작을 직업으로 하다 보니, 회사용 사이트처럼 많은 기능이 필요하지 않은 경우가 많습니다. 배포된 테마들은 다양한 기능을 제공하기 위해 많은 코드를 포함하고 있지만, 사용자 입장에서는 불필요한 기능일 때가 종종 있습니다.

그래서 저는 필요한 기능만 담고, 가볍게 사용할 수 있는 테마가 더 적합하다는 생각을 하게 되었습니다. 특히 사이트의 홈에서 배너나 슬라이드 이미지를 쉽게 변경할 수 있으면서도, 유료 테마보다 더 가벼운 테마를 제작하는 것이 목적입니다.

워드프레스 홈페이지

안녕하세요!

워드프레스에 오신 것을 환영합니다. 이것은 첫 글입니다. 바로 편집하거나 삭제한 다음 쓰기 시작하세요!