워드프레스 제작기 (5)

워드프레스에 글을 쓰기 위해서는 저 블록 추가를 자주 애용해야 합니다.

아무 것도 쓰지 않은 블록에 마우스를 올려두면 저 버튼이 뜨는데, 저 버튼을 누르면 숨겨진 기능이 쫘라락 나옵니다.

또는 잘 보이지 않을 때 최상단 줄 좌측 + 버튼을 눌러도 같은 기능이 나오니 놀라지 마세요.

플러그인 추가한 것에 따라 내용이 추가되고 빠지는 게 있는데 대체적으로 이미지나 쇼트코드를 자주 쓰고 영상이나 정해진 양식이 있는 링크의 경우 자동으로 임베드 되어 표시가 될 때도 있습니다.

이미지를 누르게 되면 업로드, 미디어 라이브러리, URL에서 삽입 세 가지가 나옵니다.

업로드는 미디어 라이브러리에 추가하겠다는 것이고 (wp-content/upload에 월 단위로 폴더가 생성되어 저장)

미디어 라이브러리는 기존에 추가된 이미지를 불러올 수 있고 (자주 쓰는 특성 이미지에 적합)

URL에서 삽입은 텀블러처럼 외부링크가 사용가능한 이미지 업로드 사이트에 올려서 링크를 따 이미지를 불러오는 것입니다. 외부링크로 불러온 그림은 클릭 시 원래 주소로 이동하여 미리보기가 뜹니다.

이미지를 삽입한 후 엔터로 새 줄이 생기지 않는다면 마찬가지로 +버튼을 눌러 문단을 선택하면 새로 한 줄이 추가됩니다. 혹은 이미지를 클릭한 후 …버튼을 눌러 ‘뒤에 추가’ 버튼을 눌러도 됩니다.

 

중간에 빈 줄을 넣기 위해서는 약간의 HTML 지식이 필요합니다.

그냥 엔터를 눌러 여러 줄을 눌러봤자 공개를 눌러 글을 게시하면 붙어서 나오는 것을 보실 수 있을텐데, 이 때 필요한 것은 공백 하나 차지하는 HTML 코드입니다.

  를 입력해주면 되는데요.

최상단의 우측 … 세개 버튼을 누르면 편집기의 모드를 바꿀 수 있습니다.

코드 편집기를 누르는 순간 뭔가 복잡한 영어의 향연을 볼 수 있는데 우리가 찾을 것은 간단합니다.

빈 줄을 넣을 부분을 찾으면 되는데 <p></p> 로만 되어있는 줄이 있을 것입니다.

이 <p></p> 사이에 &nbsp; 를 넣어주면 됩니다.

다른 곳을 클릭하면 저 단어가 공백으로 자동변환되어 안 보일텐데, 정상적인 반응이니 걱정하지 않으셔도 됩니다.

마찬가지로 들여쓰기의 경우, 편집기의 들여쓰기 기능은 전체 문단의 패딩 여백을 건드리는 역할밖에 안되므로, 문단의 가장 앞자리에 &emsp; 를 넣어주면 됩니다. 이 코드의 공백은 탭 한 칸의 간격을 가집니다.

 

문단을 통째로 복사해 붙여넣기 또한 가능합니다.

아무 문단이나 커서를 둔 채로, 드래그 하지 않은 상태에서 ctrl c 를 누르게 되면 문단이 복사됨 알람이 뜹니다.

이 상태에서 ctrl v를 누르면 해당 문단이 그대로 복사됩니다.

이것은 공백을 넣은 문단에도 사용가능하므로, 이런 방식을 쓰시거나 문단 클릭후 나오는 메뉴에서 …버튼을 눌러 복제를 눌러도 같은 결과가 나오므로 편한 방식을 쓰시면 됩니다.

 

이미지를 두 장 겹쳐 나열할 수 있습니다. 폭이 가능하다면 여러가지 겹쳐 쓸 수 있지만 보통은 2열로 두는 것이 잘 보입니다!

이미지를 차례대로 넣어두고 드래그를 하면 세번째처럼 창이 뜨는데, 두 번째 칸의 두번째 아이콘이 한 줄 행으로 만들어주는 기능입니다. 세번째 아이콘은 세로배열로 바짝 붙여서 한 그룹으로 엮어주는 것인데 2번째 행 이상을 붙일 때 좋습니다.

그룹화된 문단을 클릭하면 우측 블록의 내용도 달라지는데, 정렬 방법과 레이아웃의 폭을 어디에 맞출지, 줄바꿈을 허용할지 등등을 고를 수 있습니다. 이건 그때그때 예뻐보이는 정렬방법을 쓰시면 옷케.

마찬가지로 테이블도 만들어서 내용을 채울 수 있습니다.

 

스포일러 박스 사용법. (OtFm Gutenberg Spoiler 를 설치했을 것)

이 스포일러 박스는 스타트 블록과 엔드 블록이 세트입니다.

스타트 블록에는 마스토돈의 CW 제목 기능과 똑같습니다. 해당 박스를 누르면 우측 메뉴에서 색상을 지정할 수도 있습니다.

그 후에 두 스포일러 박스 사이에 문단을 추가해 이래저래 글을 쓰면 완료입니다.

이것 외에는 쇼트코드를 이용한 방법 밖에 없는데, 그러한 경우 문단에 대한 서식을 입력하거나 이미지를 추가하는 것이 매우 복잡했기 때문에 (모든 것을 HTML로!!) 이 플러그인이 한결 더 직관적이고 구텐베르크 입력기를 제대로 써먹을 수 있습니다.

누르셨군요!!

동숲 영상을 보고 쉬었다 가십시오

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다