워드프레스에서 카테고리 리스트 페이지 만들기

워드프레스에서 카테고리를 선택하였을 때, 해당 카테고리에 해당되는 포스트들의 리스트만 보여주는 페이지가 필요할 수 있다. 아마 찾아보면 플러그인도 있긴 할텐데, 간단히 파일 하나 정도만 생성해주면 사용자가 원하는 카테고리 페이지를 만들 수 있다.

현재 사용하고 있는 테마의 디렉토리로 이동한다.

$ cd /var/www/html/wp-content/theme/twentyseventeen

category.php 파일을 생성한다. 만약 카테고리 이름별로 페이지를 생성하고 싶다면, 원하는 카테고리 이름을 추가하여 만들어주면 된다. 예를 들어 scratch 카테고리 페이지를 만든다면, category-scratch.php를 만들어준다. 워드프레스는 해당 페이지를 읽을 때 우선순위를 두게 되는데,

category-{name}.php — category.php — archive.php — index.php

와 같은 우선순위를 두고 읽게 된다.

category.php 파일을 생성하고, 다음과 같이 입력한다. archive.php 파일에서 필요한 부분만 수정하였다.

<?php
    get_header(); ?>

<div class="wrap">
    <?php if ( have_posts() ) : ?>
        <header class="page-header">
        <?php
            the_archive_title( '<h1 class="page-title">', '</h1>' );
            the_archive_description( '<div class="taxonomy-description">', '</div>' );
        ?>
        </header><!-- .page-header -->
    <?php endif; ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php
        if ( have_posts() ) :
        ?>
        <?php
            /* Start the Loop */
            while ( have_posts() ) :
                    the_post(); ?>

            <div id="category-post">+ <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small> </div>

            <?php
            endwhile;
        else :
            get_template_part( 'template-parts/post/content', 'none' );
        endif;
        ?>
        </main>
    </div>
<?php get_sidebar(); ?>
</div>

<?php
get_footer();

저장한 다음, 다시 블로그에서 카테고리를 선택하면 다음과 같이 보인다.

이때 보여지는 포스트의 수는 워드프레스의 Reading 설정에 있는 갯수를 따른다. 이를 늘려도 되지만, 그렇게 되면 첫 페이지에 보여지는 포스트의 수가 너무 늘어나게 되므로, archive 페이지에서만 보여지는 포스트의 수를 늘려주도록 한다.

마찬가지로 테마의 디렉토리에서 functions.php 파일을 열어 다음의 내용을 추가한다.

add_action( 'pre_get_posts', 'prefix_category_query' );
function prefix_category_query( $query ) {
    if( is_archive() && $query->is_main_query() ) {
        $query->set( 'posts_per_page', '100' );
    }
}

archive 페이지의 경우에 보여지는 포스트의 수를 100개로 늘렸다. 이제 다시 카테고리를 선택해보면,

전체 포스트가 잘 보여짐을 볼 수 있다.

Advertisements

Scratch 3.0 업데이트

스크레치 3.0은 현재도 활발하게 업데이트가 진행 중이다. 이에 따라, 기존에 작성하였던 Extension들도 이에 맞추어 몇가지 수정해야 하는 상황이 발생한다.

scratch-gui

  • 확장카드의 이미지들의 위치가 한 디렉토리로 통일됨. 기존은 외부 연결에 사용되는 아이콘 그림의 경우 peripheral-connection에 넣었으나, 이젠 확장카드 이름의 디렉토리에 모두 넣어 사용하고 peripheral-connection 디렉토리는 사라짐.
  • 기존 외부링크로 되어 있던 리소스들이 로컬로 전환 중. 사운드, 이미지 등이 로컬 파일로 존재. 즉, 이제 인터넷 연결 없이도 원할히 사용 가능.
  • 확장카드 추가 – gdx, LEGO Boost 등

scratch-vm

  • 추가된 확장카드에 대한 소스들 추가.

scratch-l10n

  • 추가된 확장카드에 대한 언어 추가.

Wire cover for Dynamixel PRO

로봇 조립 중 다이나믹셀의 전선을 바짝 붙여야 할 일이 생겼습니다. 전선이야 케이블타이로 잘 정리하면 되겠지만 그렇게 묶은 전선이 로봇 관절이 움직일때 영향을 줄 수도 있어서 정리하기 위한 커버가 필요했습니다.

사용하려는 모델은 H42P-020-S300-R 이고, 프로 모델 중에선 가장 작은 타입입니다.

H42P-020-S300-R

다행스럽게 로보티즈에서 도면 및 step 모델 등을 제공해주므로 쉽게 만들수 있습니다. 일단 onshape.com으로 가서, 다운로드한 모터의 step 파일을 업로드해서 만듭니다.

이제 모델의 크기를 반영해서 커버를 만들어줍니다. 전선이 지나갈 홈도 파 주고요. 다 그렸으면 어셈블리로 모터에 붙여서 크기가 잘 맞는지 확인해봅니다.

잘 맞는것 같네요. 이제 이걸 stl 파일로 export하고, 슬라이서 프로그램을 통해 gcode를 생성해줍니다. 양쪽 두개가 필요하니까 한꺼번에 두개를 배치하고 생성!. 표면이 거칠어도 사용하는데는 큰 무리가 없으니, 적측두깨는 0.2mm로 강도는 좀 있어야 하니 채움은 30% 정도?

약 1시간 40분 정도 걸린다고 나오네요.. 프린터로 옮겨서 출력을 해주면!!??

이렇게 예쁘게 출력이 잘되고~~, 모터와 결합해보면??!!

모터의 크기에 딱! 맞게 끼워지고, 나사 구멍의 위치도 정확하게 맞네요..^^

끗!

M5STACK FIRE DEVELOPMENT KIT

M5Stack은 ESP32를 사용하여 만들어진 개발용 킷트이다. 현재 참여하고 있는 EduBot에도 ESP32가 들어가는데, 이번에 구입한 FIRE 버전은 16M Flash와 4M PSRAM을 가진 ESP32가 들어가 있다. (좀더 용량이 낭낭하게 많아졌단 얘기, 램도.. 어쨌든 다다익선).

현재 알리익스프레스에서 팔고 있고, 한국에서도 위즈넷(?)이란 곳에서 판매하고 있다고 한다.

구매링크 바로가기

가격은 대략 7만원 ~ 8만원대인데, 구성이 상당히 알차게 들어 있다. 마이크, 스피커, BLE, WiFi, 가속도, 자이로, 지자기센서, LCD, 버튼, RGB LED 등등 단독으로 사용해도 뭔가 재밌는 것을 만들어볼수 있을 것 같다. 물론 확장포트도 있어서, 외부센서를 추가로 연결할 수 있다. 배터리도 내장되어 있어 충전독 혹은 USB-C 케이블을 이용하여 충전한다.

io.m5go.com 웹페이지를 이용하여 온라인으로 블럭코딩 및 코딩을 하여 M5Stack를 제어할 수 있다. WiFi가 지원된다는 이점을 활용한 것 같다.

위 웹페이지에서 만든 블럭코딩 결과물을 실행하면, 현재 내가 갖고 있는 M5Stack에서 바로 실행된다. (WiFi가 연결되지 않으면 당연히 사용할 수 없음)

코어 성능도 빠방하고, 직접 개발시 Arduino Sketch를 사용하고 M5Stack에 대한 Library도 충분히 지원되니 환경 설정에 애먹고 시간을 허비하는 일은 거의 없을 듯 하다.

이외에도 요새 유행한다는 마이크로 Python도 돌아간다고 하고… 뭐 용도는 무궁무진할 듯.

자~ 이제 이걸로 뭘 해 볼까나??

Blockly 개발환경 구축

Blockly는 오픈소스로 소스가 모두 개방되어 있다. 이를 가져와 개발자의 의도 및 용도에 맞게 수정하여 사용 가능하다. Blockly는 미들웨어 성격으로, 사용자의 어플리케이션에 맞게끔 수정 및 기능 추가가 용이하다.

일단 Blockly 소스를 가져와 빌드해보도록 한다. Javascript의 빌드 결과물은 주로 xxxx_compressed.js의 이름으로 저장되며, 여러개로 분산된 코드를 하나의 파일에 압축(정확히는 함축)하여 저장한다.

먼저 소스를 가져온다. github의 Blockly 레포지토리 (https://github.com/google/blockly/releases) 에서 최신 릴리즈 소스 (https://github.com/google/blockly/archive/1.20190215.0.tar.gz)를 다운로드한다.

받은 압축 파일을 임의의 디렉토리로 이동한 후 압축을 푼다. (본 포스팅에선 ~/Developer 를 사용.)

$ cd ~/Developer
$ tar zxf blockly-1.20190215.0.tar.gz

빌드하기 위해선 일단 python2.7이 설치되어 있어야 한다. (macOS엔 python 2.7이 기본 설치되어 있으므로 괜찮음. Windows에선 따로 설치 필요)

$ cd blockly-1.20190215.0
$ ./build.py

이때 다음과 같은 에러가 발생하면, closure-library가 필요하다.

Error: Closure not found.  Read this:
developers.google.com/blockly/guides/modify/web/closure

위 에러 메시지에서 알려준 링크 (developers.google.com/blockly/guides/modify/web/closure)로 가서 압축 파일을 다운로드 한다.

받은 파일을 ~/Developer에 풀고, 디렉토리 이름을 closure-library로 변경한다.

$ cd ~/Developer
$ tar zxf ~/Downloads/google-closure-library-v20190301-20-gde66a8a.tar.gz 
$ mv google-closure-library-de66a8a closure-library

이제 다시 blockly 디렉토리로 이동하여 빌드한다.

$ cd blockly-1.20190215.0
$ ./build.py

여러 메시지가 쭈욱 나오고, 에러가 없이 마무리되면 다음과 같은 파일이 생성된다. (이미 컴파일된 파일이 있긴 하지만, 업데이트 된다) 만약 java.lang.RuntimeException: INTERNAL COMPILER ERROR와 같은 에러가 발생한다면, 잠시후 다시 실행하면 정상적으로 빌드 된다.

...

SUCCESS: msg/js/tlh.js
SUCCESS: msg/js/ba.js
SUCCESS: blockly_uncompressed.js
SUCCESS: blockly_accessible_uncompressed.js
SUCCESS: blockly_compressed.js
Size changed from 2637 KB to 780 KB (30%).
SUCCESS: blockly_accessible_compressed.js
Size changed from 2739 KB to 826 KB (30%).
SUCCESS: blocks_compressed.js
Size changed from 154 KB to 74 KB (48%).
SUCCESS: javascript_compressed.js
Size changed from 85 KB to 47 KB (56%).
SUCCESS: python_compressed.js
Size changed from 71 KB to 36 KB (51%).
SUCCESS: php_compressed.js
Size changed from 74 KB to 38 KB (52%).
SUCCESS: lua_compressed.js
Size changed from 66 KB to 33 KB (50%).
SUCCESS: dart_compressed.js
Size changed from 78 KB to 41 KB (52%).

빌드 완료.

생성된 파일의 용도를 설명하면…

  • blockly_compressed.js : Blockly 코어 파일
  • blocks_compressed.js : 기본 블럭
  • javascript_compressed : Javascript 코드 제너레이터
  • python_compressed.js : Python 코드 제너레이터
  • php_compressed.js : PHP 코드 제너레이터
  • lua_compressed.js : Lua 코드 제너레이터
  • dart_compressed.js : Dart 코드 제너레이터

끗!