내 포스트 링크 박스 만들기 도구 - 펭수의 워드프레스 보물창고

워드프레스를 시작하면서 이것저것 나만의 도구들을 만들고 있습니다.
이번에는 포스트 링크 박스 만들기 도구를 만들어 보았습니다.
분명 어딘가, 누군가가 만들어 놓았을것으로 생각 되지만 찾기 힘들어서 그냥 만들었습니다.

네이버 블로그에 사이트 링크를 붙이면 아래 이미지처럼 사이트 링크 박스가 자동으로 생성 됩니다.
워드프레스도 비슷한 기능이 있긴 하지만 내 맘처럼 예쁘게 생성되지는 않더라구요.
(비슷한 기능의 플러그인이 있을 수도 있겠네요. 혹시 아시는 분은 댓글 부탁 드립니다.)

쉬운 목차

포스트 링그박스 만들기 사이트

아래 링크를 클릭하시면 포스트 링크 박스 만들기 사이트로 바로 가실 수 있습니다.

워드프레스 포스트 링크 박스 만들기

포스트 링크박스 생성기는 사용자가 손쉽게 링크박스를 생성하고포스트에 삽입할 수 있는 프로그램입니다.

펭수의 워드프레스 꾸미기

포스트 링크 박스 만들기 사용 영상

포스트 링크 박스 만들기 툴의 사용법은 아주 쉽습니다.
더 쉽게 알아보기 위해서 동영상으로 사용영상을 보여 드리겠습니다.
아래 영상 참고하세요.

포스트 링크박스 만들기 시연 영상

포스트 링크 버튼 만들기 순서

위 영상을 참고하시면서 아래 순서대로 진행 하시면 됩니다.

생성하고자 하는 포스트 주소를 붙여 넣습니다.
제목 Color 를 선택 합니다. ( 기본색상도 좋습니다. )
호버 Color 를 선택 합니다. ( 마우스를 가져갔을 때 변하는 테두리 색상, 기본도 좋습니다.)
가로폭 선택 ( 기본폭 추천 )
생성하기 버튼 눌러서 아래 보이는 박스를 보면서 1 ~ 4 까지 미세 조절
코드 복사하기를 누르시면 클립보드에 코드가 복사 됩니다.

생성된 코드 확인

아래 코드는 클립보드에 복사된 코드를 표시한 코드 입니다.

첫번째 코드는 가로형 박스 코드 입니다.

<div class="postBox" data-post-type="가로형" style="max-width: 639px; padding: 10px; border: 2px solid rgb(204, 204, 204); border-radius: 5px; overflow: hidden; cursor: pointer; transition: border-color 1s ease 0s; margin-bottom: 30px;" onmouseover="this.style.border='2px solid #45a049';" onmouseout="this.style.border='2px solid #ccc'">
    <div style="display: flex; align-items: center;">
        <div style="flex-shrink: 0; margin-right: 25px;" onclick="window.open('https://pengsu.co.kr/워드프레스-자동포스팅with-php/#more-154', '_blank')">
            <img src="https://pengsu.co.kr/storage/2024/02/워드프레스자동포스팅WithPHP.png" alt="워드프레스 자동포스팅(with PHP) - 펭수의 워드프레스" style="width: 140px; height: auto; border-radius: 5px;  border: 1px solid #ccc; padding : 2px;">
        </div>
        <div style="flex-grow: 1; overflow: hidden;">
            <div onclick="window.open('https://pengsu.co.kr/워드프레스-자동포스팅with-php/#more-154', '_blank')">
                <div id="postTitle" style="font-size: 18px; color: rgb(51, 51, 51); font-weight: bold; margin-bottom: 5px; transition: color 0.5s ease 0s;" onmouseover="this.style.color='#2465ff';" onmouseout="this.style.color='#333'">워드프레스 자동포스팅(with PHP) - 펭수의 워드프레스</div>
                <div style="font-size: 14px; color: #666; margin-top: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">워드프레스를 자동 포스팅 하는 방법에 대해서 소개 드립니다. 파이썬을 이용해서 자동 포스팅하는 글은 많이 있는데 PHP 를 이용한 방법은 자세히 설명된 글이 없어서 PHP 를 이용해서 자동 포스팅 하는 방법에 대해서 소개 합니다.</div>
            </div>
            <div>
                <div style="display: flex; align-items: center; justify-content: space-between; margin-top:5px;">
                    <a href="https://pengsu.co.kr" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
                        <img src="https://pengsu.co.kr/storage/2024/02/cropped-cropped-cropped-펭수-32x32.png" width="32" height="32" alt="" style="margin-right: 5px;">
                        <span style="font-weight: bold; font-size: 0.8em; color:#00a832; transition: color 0.5s;" onmouseover="this.style.color='#5092d7';" onmouseout="this.style.color='#00a832'">펭수의 워드프레스</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

아래는 세로형 박스의 코드 입니다.

<div class="postBox" data-post-type="세로형" style="max-width: 639px; padding: 10px; border: 2px solid rgb(204, 204, 204); border-radius: 5px; overflow: hidden; cursor: pointer; transition: border-color 1s ease 0s; margin-bottom: 30px;" onmouseover="this.style.border='2px solid #45a049';" onmouseout="this.style.border='2px solid #ccc';">
    <div style="text-align: left;">
        <div style="margin-bottom: 10px;" onclick="window.open('https://pengsu.co.kr/워드프레스-자동포스팅with-php/#more-154', '_blank')">
            <img src="https://pengsu.co.kr/storage/2024/02/워드프레스자동포스팅WithPHP.png" alt="워드프레스 자동포스팅(with PHP) - 펭수의 워드프레스" style="max-width: 100%; height: auto; border-radius: 5px; border: 1px solid #ccc;">
        </div>
        <div>
            <div onclick="window.open('https://pengsu.co.kr/워드프레스-자동포스팅with-php/#more-154', '_blank')">
                <strong style="font-size: 18px; color: #333; font-weight: bold; transition: color 0.5s;" onmouseover="this.style.color='#2465ff';" onmouseout="this.style.color='#333'">워드프레스 자동포스팅(with PHP) - 펭수의 워드프레스</strong>
                <p style="font-size: 14px; color: #666; margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">워드프레스를 자동 포스팅 하는 방법에 대해서 소개 드립니다. 파이썬을 이용해서 자동 포스팅하는 글은 많이 있는데 PHP 를 이용한 방법은 자세히 설명된 글이 없어서 PHP 를 이용해서 자동 포스팅 하는 방법에 대해서 소개 합니다.</p>
            </div>
            <div style="display: flex; align-items: center; justify-content: space-between; margin-top:5px;">
                <a href="https://pengsu.co.kr" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
                    <img src="https://pengsu.co.kr/storage/2024/02/cropped-cropped-cropped-펭수-32x32.png" width="32" height="32" alt="" style="margin-right: 5px;">
                    <span style="font-weight: bold; font-size: 0.8em; color:#00a832; transition: color 0.5s;" onmouseover="this.style.color='#5092d7';" onmouseout="this.style.color='#00a832'">펭수의 워드프레스123</span>
                </a>
            </div>
        </div>
    </div>
</div>

생성된 박스 확인

이 코드를 사용자 정의 HTML 박스에 넣으면 각각 아래 처럼 볼 수 있습니다.

가로형 링크박스

워드프레스 포스트 링크 박스 만들기

포스트 링크박스 생성기는 사용자가 손쉽게 링크박스를 생성하고포스트에 삽입할 수 있는 프로그램입니다.

펭수의 워드프레스 꾸미기

세로형 링크박스

워드프레스 자동포스팅(with PHP) – 펭수의 워드프레스

워드프레스를 자동 포스팅 하는 방법에 대해서 소개 드립니다. 파이썬을 이용해서 자동 포스팅하는 글은 많이 있는데 PHP 를 이용한 방법은 자세히 설명된 글이 없어서 PHP 를 이용해서 자동 포스팅 하는 방법에 대해서 소개 합니다.

펭수의 워드프레스

포스트 링크 박스 만들기 툴을 테스트 해본 결과 대부분의 사이트의 글은 잘 가져오는것으로 확인 하였습니다. 워드프레스, 티스토리 등의 링크 박스는 잘 가져오는데 네이버 블로그는 잘 안되더라구요. 이점 참고하시기 바랍니다.
링크를 통해서 이미지를 못가져올 경우에는 임의의 이미지를 붙이게 되어 있으니 이 부분도 참고하시면서 이용하시면 좋겠습니다.

오늘은 내가 필요해서 만든 포스트 링크 박스 만들기 툴에 대해서 소개 드렸습니다.
사용하시면서 불편한 점이나 개선 사항 있으시면 댓글로 남겨주시면 반영하도록 하겠습니다.

포스트 링그박스 만들기 사이트

포스트 링크 박스 만들기 사용 영상

포스트 링크 버튼 만들기 순서

생성된 코드 확인

생성된 박스 확인

댓글 남기기 응답 취소