워드 프레스에서 이미지를 나란히 정렬하는 방법

이미지 정렬은 워드 프레스 블로거에 대한 지속적인 투쟁이다.

이 포스팅은 편집기에서 이미지 정렬 및 위치를 만지작 거리는 것을 인정하는 것보다 더 많은 시간을 보낸 사람을위한 것입니다.

이미지를 정렬하는 가장 좋은 두 가지 방법

서로 옆에 이미지를 배치하기 위해 고려해야 할 두 가지 방법이 있습니다. 나는 포함 된 장단점뿐만 아니라 각 하나를 사용하는 방법을 공유 할 수 있습니다.

갤러리에 이미지 정렬

이미지를 나란히 배치하는 가장 신뢰할 수 있는 방법은 워드프레스 갤러리를 사용하는 것입니다.

이전에 갤러리를 만든 적이 없다면 갤러리를 만드는 방법에 대한 이 자습서를 따르십시오.

트릭은 이미지의 중간 크기의 버전을 사용하고 두 개의 이미지를 포함하는 경우에도 두 개의 열을 선택하는 것입니다. 결과는 다음과 같이 보일 것입니다:

예제 갤러리의 스크린 샷

예를 들어 갤러리 스크린샷

게시물에 배치한 이미지와는 달리 갤러리에는 이미지를 서로 옆에 두는 특별한 이미지가 있습니다. 이 구조는 번거 로움의 쉽고 적은 행/열로 이미지를 정렬 할 수 있습니다.

열 단축 코드와 장소 이미지

당신이 당신의 사이트에 새로운 플러그인을 추가 괜찮다면,열 단축 코드는 이미지를 정렬하기위한 훌륭한 솔루션입니다.

열 단축 코드 플러그인 페이지의 스크린 샷

열 단축 코드는 새로운 메뉴로 사이트를 채우지 않는 멋진 플러그인 중 하나입니다. 사실,그것은 당신의 관리 대시 보드에 추가하는 유일한 것은 편집기 위에이 편리한 버튼입니다.

열 단축 코드에 의해 추가 된 버튼

열 단축 코드에 의해 추가 된 버튼

그것이 작동하는 방법을 보여,나는 세 개의 이미지의 단일 행을 만들 수 있습니다.

열 단축 코드를 사용하는 방법

첫 번째 단계는 편집기에서 빈 줄에 커서를 배치하는 것입니다. 그런 다음 단축 코드 버튼을 클릭하고 열 옵션을 선택합니다.

열 단축 코드를 추가하는 방법을 표시
세 개의 열이있는 행을 만들기.

이 단계를 반복하여 두 번째 1/3 열을 추가 한 다음 한 번 더 반복하지만 이번에는 1/3(마지막)옵션을 사용합니다. 결과는 편집기에 추가 된 다음 단축 코드입니다.

편집기에서 단축 코드

편집기에서 단축 코드

당신이 전에 단축 코드를 사용한 적이 없다면,먼저이 튜토리얼을 수행 할 수 있습니다.

당신이 볼 수 있듯이,각 단축 코드는 개폐 태그가 있습니다. 이제 다음과 같이 각 단축 코드 안에 이미지를 넣을 수 있습니다:

편집기에서 단축 코드의 이미지

편집기에서 단축 코드의 이미지

엉망,안 그래?

단축 코드는 편집기에서 이미지의 스타일을 할 수 없기 때문에 그건,하지만 문제가되지 않습니다. 사이트에 표시되면 다음과 같이 열에 깔끔하게 정렬됩니다:

열에 배치된 이미지의 예

컬럼에 배치 된 이미지의 예

열 단축 코드 갤러리에 비해

단축 코드 갤러리와 같은 편집기에 잘 표시되지 않고 작업 할 수있는 도전의 더 많은 수 있지만,당신은 또한 좀 더 제어 할 수 있습니다. 예를 들어 갤러리는 모든 이미지를 강제로 연결합니다:

  • 미디어 파일
  • 첨부 파일 페이지
  • 아무것도

열 플러그인을 사용하면 이미지가 다른 유형의 페이지에 대한 사용자 정의 링크와 각 링크를 가질 수 있습니다.

열을 혼합 및 일치시킬 수도 있습니다. 예를 들어,다음 1/3 열 단축 코드 와 사진 에 2/3 단축 코드 에서 하나의 이미지를 배치 할 수 있습니다.

정렬 옵션을 사용하지 말아야 하는 이유

이러한 메서드는 모든 문제 없이 원하는 레이아웃을 생성합니다.

워드프레스 갤러리는 이미지를 연속으로 정렬하는 가장 간단하고 쉬운 방법입니다. 그러나 열 단축 코드는 더 많은 유연성을 제공하는 좋은 대안입니다.

둘 다 이미지를 새로운 구조에 배치하기 때문에 잘 작동합니다. 이 기능을 사용하면 화면을 보는 데 사용되는 화면에 관계없이 나란히 레이아웃을 유지할 수 있습니다.

내가 놓친 것이 있습니까? 질문이 있으십니까? 아래에 코멘트를 게시.

벤 시블리
벤 시 블리
벤 시 블리는 워드 프레스 테마 디자이너&개발자 및 경쟁 테마의 설립자이다.

Leave a Reply