안산드레아스

워드프레스에서 무료로 미국 주식시장에 대한 정보를 불러올 수 있는 플러그인이 있다.

stockdio 라는 플러그인.

1. 플러그인에 stockdio 라고 치면 여러개가 나온다. 그중에 차트를 쓰기 위해서는 historical chart 플러그인

2. stockdio 사이트에 가서 회원 가입을 하고 API 정보를 받는다.

https://services.stockdio.com/howtouse

3. endpoint에 가서 원하는 주식의 정보 html 코드를 받아온다.

4. 내 페이지에 해당 html 코드를 넣으면 표시된다.

1. 테마 설치

2. 데모 불러오기

    데모를 불러오는 플러그인 설치

    demo importer 클릭 후 Main 데모 import

    이제 내 홈페이지가 데모 기사들로 바껴있음을 알 수 있다.

이제 나머지는 입맛에 맞게 수정한다.

(참고 영상)

https://www.youtube.com/watch?v=MRuC-x37Nic 

사용하는 플러그인으로는 "amchart" 이다.

엘리멘토 플로그인과 함께 사용.

1. 플러그인 설치 (install) 후 활성화 (active)

2. 새페이지에 엘리멘토로 HTML블록 만들기

    (엘리멘토 플러그인이 없다면 아래 참고)

https://ansan-survivor.tistory.com/1108

    새로운 페이지에 엘리멘토로 열어본다. 그리고 왼쪽에 HTML을 넣어준다.

3. 데모페이지에서 원하는 차트의 코드를 불러온다.

    아래 데모 페이지

https://www.amcharts.com/demos/

(결과) 그래프가 잘 출력됨을 볼 수 있다. (배경이 검정색이라 x,y 축이 안보이는 것임)

마찬가지로 다른 그래프도 비슷하다.

목차를 만들 때 본인이 사용하는 테마가 워드프레스가 지원하는 각종 플러그인과 잘 맞아 떨어지면 플러그인을 쓰면된다. 찾아보면 각종 무료 목차 생성 플러그인들이 있다.

그러나 그게 안된다면 수동으로 만들어주어야 한다.

1. 아무 페이지 생성 (또는 기존에 사용 페이지) - Add block 생성

2. Heading추가

3. 아무 제목 입력 - ... 클릭 - Edit as HTML

4. 제목과 내용을 만들고 HTML코드를 아래와 같이 수정.

<h2 id="anchor-1">Section 1</h2>

5. 목차를 만들고자 하는 곳에 커서 - 상단의 + 버튼클릭

6. 스크롤 아래로 내린 후 "Custom HTML" 선택

7. 목차 HTML 코드를 입력한다.

    * 아래에서 새창으로 열기를 사용할 경우 target="_blank" 를 넣으면 되고 아니면 빼면된다.

<div class="toc">
<ol>
<li><a rel="noopener" href="#anchor-1">Section 1</a></li>
<li><a rel="noopener" href="#anchor-2">Section 2 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li>
</ol>
</div>

(결과)

무료 플러그인으로 자동으로 목차를 생성하고 싶다면 아래 참고.

https://ansan-survivor.tistory.com/1348

HTML코드에서 새창으로 여는 방법은 아래 코드를 추가 하면 된다.

target="_blank"

반대로 저게 없으면 현재창에서 여는 것.

어떤 목차 코드가 있는데, 이를 현재창에서 이동하는것과 새창에서 열고 이동하는 코드 예시이다.

<div class="toc">
<ol>
<li><a rel="noopener" href="#anchor-1">Section 1</a></li>
<li><a rel="noopener" href="#anchor-2">Section 2 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li>
</ol>
</div>

위 anchor-1 과 anchor-2 는 현재창에서 바로 이동하고, anchor-3 과 anchor-4 는 target="_blank"가 있으므로 새창을 열고 그곳에서 이동한다.

워드프레스를 이용해 IT관련 블로그를 운영할 경우 특정 코드에 대한 하이라이트기능을 제공하는 플러그인이 있다.

포스팅은 기본으로 제공하는 Class edit 으로 했을 때, 블록단위 아래 기능이 제공된다.

이름은 "Highlighting Code Block" 이다.

1. 플러그인 설치

2. 새로운 포스팅 작성

3. 코드 블록 추가하기

(결과) 아래와 같이 코드블럭이 삽입된다.

워드프레스를 운영할 때 기본적으로 설치하면 좋을 플러그인 몇가지를 추려보았다.

일단 설치 방법은, Plugins - Add New 에서 검색 후 설치

1. Elementor과 Essential Addons for Elementor

    엘리멘토는 드레그 드롭으로 웹페이지를 쉽게 만들수 있는 가장 기본적인 플러그인

    위 두개 플러그인은 세트로 함께 설치하면 좋다.

2. WP Fastest Cache

    케쉬 (임시로 남는 찌꺼기) 들을 신속히 제거하여 속도 향상에 기여

3. UpdaftPlus WordPress Backup Plugin

    현 시점을 백업으로 남겨두는 history 기능 (되돌리기 가능)

https://ansan-survivor.tistory.com/656

4. Yoast SEO

    구글 검색어 유입 키워드 최적화

5. Smush - Lazy Load Image, Optimize & Compress Images

    사이트 로딩에 영향을 주는 이미지의 품질저하없이 용량 크기를 줄여주는 플러그인

https://ansan-survivor.tistory.com/1107

웹페이지의 이미지는 필수 요소이다.

그러나 텍스트 대비 용량이크고 로드를 많이 잡아먹어 속도를 저하 시킬 수 있다.

워드프레스는 이를 방지하기 위한 최적화 플러그인을 지원한다.

기존에 올려져 있던 이미지도 최적화 시키고, 앞으로 업로드 시킬 이미지 또한 최적화 한다.

이는 거의 필수 플러그인이라 해도 과언이 아니다!

설치 및 활성화는 아래와 같다.

1. 설치 및 활성화

2. 셋업 진행

(결과 확인) 필자는 총 16개의 이미지가 최적화 됨을 확인