워드프레스에 로또번호 생성기 추가하기

재미로 로또번호 생성기를 워드프레스에 추가해 보았습니다. 로또번호 추출기 소스는 인터넷에서 쉽게 찾을 수 있습니다. 그런 소스를 가져다가 챗GPT에 문의하여 원하는 대로 수정할 수 있습니다.

워드프레스에 로또번호 생성기 추가하기

로또번호 생성기 소스는 다음  Codepen 사이트에서 확인할 수 있습니다.

 

JavaScript Lottery Number Generator

상기 페이지의 코드를 jsfiddle 사이트에 복사한 다음, 테스트해 볼 수 있습니다.

이제 챗GPT에 코드를 제시하고, 요구 사항을 입력하여 코드를 생성해 줄 것을 요청할 수 있습니다. 그러면 챗GPT에서 요구 사항을 반영하여 코드를 제시합니다.

해당 코드를 jsfiddle에 입력하여 테스트해보고, 원하는 대로 작동하지 않으면 다시 알기 쉽게 설명하여 요청하도록 합니다. 이런 작업을 몇 차례 반복하면 원하는 코드를 얻을 수 있을 것입니다.

상기 코드를 응용하여 챗GPT를 통해 업데이트한 코드를 다음 jsfiddle 페이지에서 확인할 수 있습니다.

https://jsfiddle.net/82wg6hLz/

Edit fiddle - JSFiddle - Code Playground

jsfiddle 서비스가 유지될 수 있도록 애드 블록을 사용하고 있다면 jsfiddle 사이트에 대하여 광고를 허용하시기 바랍니다.😄😄😄

위의 문서에 제시된 코드를 사용하면 다음 그림과 같이 여러 개의 번호 세트를 생성하여 복사할 수 있습니다.

코드가 완성되었다면 워드프레스에 적용할 수 있습니다. 워드프레스에는 세 파트로 나누어서 적용하도록 합니다.

1. HTML 파트
2. CSS 파트
3. JS 파트

HTML의 경우 숏코드를 만들어서 로또번호 생성기를 표시하고 싶은 경우 추가할 수 있습니다. 숏코드로 만들고 싶은 경우 다음 코드를 테마의 함수 파일에 추가합니다. (차일드 테마를 만들어 작업하세요. 그렇지 않으면 추후 테마 업데이트 시 코드가 사라집니다.)

function lottery_shortcode() {
    ob_start();
    ?>
    <div class="submit">
      <button onclick="generate(6, 1, 45);">Generate</button>
      <button onclick="copyToClipboard();">Copy Numbers</button>
    </div>
    <div id="numbers"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('lottery_generator', 'lottery_shortcode');

로또 번호 추출기를 추가할 곳에 다음과 같이 숏코드를 입력합니다.

[lottery_generator]

CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. CSS로 스타일을 조정할 수 있습니다.

자바스크립트 코드는 정식적인 방법으로는 다음 글을 참고하여 로드하도록 합니다. 

 

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 - 워드프레스 정보꾸

쉬운 방법으로는 WPCode와 같은 플러그인을 사용하여 푸터 영역에 js 코드를 추가합니다.

테스트로 만든 로또번호 생성기를 다음 페이지에서 확인할 수 있습니다.

로또번호 생성기 - 워드프레스 정보꾸러미

번호에 포함할 숫자와 제외할 숫자를 선택할 수 있도록 만들어 보았습니다.

참고

https://cloudways.tistory.com/25

클라우드웨이즈(Cloudways): 워드프레스 사이트 복제하기

https://cloudways.tistory.com/24

워드프레스 네이버 카페 소개 - 워드프레스 사용자 모임